Blazor和Vue对比学习(基础1.7):传递UI片断,slot和RenderFragment

组件开发模式,带来了复用、灵活、性能等优势,但也增加了组件之间数据传递的繁杂。不像传统的页面开发模式,一个ViewModel搞定整个页面数据。

组件之间的数据传递,是学习组件开发,必须要攻克的难关。这个章节,我们将一起学习如何将UI片断传递给子组件。子组件的UI片断,由父组件来提供,子组件接收到后直接渲染,这种场景的使用范围还是比较多的。我们之前对自定义组件的操作,一直都是在标签属性的位置,从来没有在标签体内容的位置搞过【<Child>这个位置</Child>】。这个位置,就是为传递UI模板片断准备的。Vue使用slot来接收,Blazor使用RenderFragment来接收。这两个使用的差异还是很大,【<slot></slot>】是组件标签,在视图层中使用;【RenderFragment ChildContent{get;set}】是属性,在逻辑层使用。我们通过以下几节,来一起学习。

 

匿名传递一个UI片断

具名传递多个UI片断

UI片断的数据作用域(父子作用域数据):以创建一个简单的自定义表格组件为例

 

一、匿名传递一个模板片断

//Vue=====================================

//父组件:可以传递任意UI片断,包括响应式数据
<template>
  <div class="parent">
    //传递文本
    <Child>普通文本</Child>
    //传递响应式数据
    <Child>响应式数据:{{msg}}</Child>
    //传递任意模板片断,可以是原生HTML标签,也可以是自定义组件标签
    <Child>
      <h5>任意HTML标签和自定义组件</h5>
      <Other></Other>
    </Child> 
    //如果不传递,则默认显示子组件中slot标签体内容
    <Child></Child> 
  </div>
</template>

<script setup>
import Child from './components/Child.vue'
import Other from './components/Other.vue'
import {ref} from 'vue'
const msg = ref('响应式数据')
</script>

 

//子组件
<template>
<div class="child">
    //子组件的插槽,相当于一个占位符
    <slot>
        <span>标签体内容不传入值时,默认显示这个模板片断</span> 
    </slot>
</div>
</template>
//Blazor
//父组件:可以传递任意UI片断
<Child>普通文本</Child>
<Child>响应式数据:@msg</Child>
<Child>
    <h5>任意HTML标签和自定义组件标签</h5>
    <Counter></Counter>
</Child>

@code {
    private string msg = "响应式数据";
}


//子组件:使用RenderFragment类型属性接收。注意,匿名片断,属性名称必须为ChildContent,这是命名约定
<div>@ChildContent</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}


//如果父组件未传入UI片断,如<Child></Child>。子组件如何设置默认值?
//子组件需要使用完整属性的方式来接收
//完整属性的私有字段部分,设置默认值。RenderFragment是委托类型,需要传入一个回调,参数类型为RenderTreeBuilder,名称必须为__builder。先记住语法,后面会解释
private RenderFragment childContent = (RenderTreeBuilder __builder) =>
{
    <h1>父组件如果不传入UI,则默认显示这句话</h1>
};

[Parameter]
public RenderFragment? ChildContent
{
    get => childContent;
    set => childContent = value;
}

 

  

 

二、具名传递多个片断

//Vue=====================================

//父组件。
//使用template标签来包装模板片断,并使用【v-slot:片断名称】来命名
//命名还可以简写为【#片断名称】
//未具名的片断,会按先后顺序统一传入到未命名的slot中。

<template>
  <div class="parent">
    <Child>
        <h5>这是未具名的模板片断(1)</h5>
        <template v-slot:header><h2>header片断</h2></template>
        <template #content><h3>content片断,#是【v-slot:】的简写</h3></template>
        <template #footer><h4>footer片断</h4></template>
        <h5>这是未具名的模板片断(2)</h5>
    </Child>
</div>
</template>

<script setup>
import Child from './components/Child.vue'
</script>

 
//子组件。使用【name="片断名称"】,来接收具名的片断。
<template>
<div class="child">
    <h5>下面显示header片断</h5>
    <slot name="header"></slot>
    <h5>下面显示content片断</h5>
    <slot name="content"></slot>
    <h5>下面显示footer片断</h5>
    <slot name="footer"></slot>
    <h5>下面显示未具名片断</h5>
    <slot></slot> //这个插槽负责接受所有未具名的模板片断
</div>
</template>
//Blazor====================================
//父组件。
//直接使用标签方式传递,标签名就是子组件的RenderFragment属性名。
//Blazor的具名片断,语法比Vue更简洁
<Child>
    <Header>
        <h1>这里是Header片断</h1>
    </Header>
    <Body>
        <h3>这里是Body片断</h3>
    </Body>
    <Footer>
        <h5>这里是Footer片断</h5>
    </Footer>
</Child>

@code {
}


//子组件
//具备的RenderFragment可以任意命名。匿名则只能使用ChildContent
<div>@Header</div>
<div>@Body</div>
<div>@Footer</div>

@code {
    [Parameter]
    public RenderFragment? Header { get; set; }
    [Parameter]
    public RenderFragment? Body { get; set; }
    [Parameter]
    public RenderFragment? Footer { get; set; }
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

 

 

 

三、UI片断的数据作用域(父子作用域数据):以创建一个简单的自定义表格组件为例

正常情况下,传递UI片断时,父子组件的数据作用域是相互隔离的,但有时候我们需要父子组件之间的数据能够串通,比如:

 

 1、子组件需要使用父组件的数据:这个比较简单,通过属性传递,咱们都学过

1Vue<Child :sources = peoples></Child>

2Blazor<Child sources = @peoples></Child>

 

2、父组件需要使用子组件的数据:这个比较麻烦,Vue还好点,Blazor会比较复杂。我们详细说一下:

//Vue=====================================
//使用slot的属性传递,记住套路就可以,还是比较简单

//匿名插槽情况
//父组件:使用【v-slot="slotProps"】接收,其中slotProps是命名约定,不能修改
<template>
    <Child v-slot="slotProps">
    {{slotProps.msg1}}{{slotProps.msg2}}
    </Child>
</template>
<script setup>
import Child from './components/Child.vue'
</script>

 
//子组件:通过属性msg和count传递多个值
<template>
<div>
    <slot :msg1=" 'hello' " :msg2=" 'world' "></slot>
</div>
</template>


//具名插槽情况
<Child>
    <template #header="headerProps">
        {{ headerProps.msg }}
    </template>
    <template #footer="footerProps">
        {{ footerProps.msg }}
    </template>
</MyComponent>
//子组件传值
<slot name="header" msg="‘这是header传的值’"></slot>
<slot name="header" msg="‘这是footer传的值’"></slot>
//Blazor===================================
//需要使用到泛型RenderFragment,会比较晦涩一些。没关系,我们先从认识RenderFragment的本质开始。
// RenderFragment的本质是一个委托, 它将 RenderTreeBuilder 作为委托入参,从而完成UI的渲染。

//我们先看一下以下四种Razor文档的等效写法:


//第一种:这是一个简单的Razor文件
<div>hello world</div>


//第二种:这个文件如果使用RenderFragment来实现,可以等价于:
<div>@HelloContent</div>
@code{
    private RenderFragment HelloContent=(RenderTreeBuilder builder)=>{
        builder.OpenElement(0,"div");
        builder.AddContent(1, "hello world");
        builder.CloseElement();
    };
}


//第三种:上面的写法比较繁索,RenderFragment的回调里还可以直接写HTML
//注意这种方式,参数名称必须为__builder,这是约定名称
//看到第三种写法,能不能领会到从父组件传递子组件的实质?
//父组件传递UI片断时,这个UI片断就是进入到RenderFragment的回调里
<div>@HelloContent</div>
@code {
    private RenderFragment HelloContent = (RenderTreeBuilder __builder) =>
    {
        <div>hello world </div>
    };
}


//第四种:RenderFragment还有一种泛型方式RenderFragment<T>,可以实现传递数据到UI片断
//下例中,将字符串world,做为参数传递到渲染片断里。
<div>@HelloContent("world")</div>
@code {
    private RenderFragment<string> HelloContent = (msg) => (RenderTreeBuilder builder) =>
    {
        builder.OpenElement(0, "div");
        builder.AddContent(1, "hello " + msg);
        builder.CloseElement();
    };
}

 

//最后,我们通过父子组件传递UI片断的方式,来实现hello world
//父组件
<Child T="string"> //指定泛型类型
    <div>
        @context //context代表为子组件的msg
    </div>
</Child>

@code {
}
 
//子组件
@typeparam T

@ChildContent((T)msg) //将msg强制转化为T泛型

@code {
    [Parameter]
    public RenderFragment<T>? ChildContent { get; set; }
    private object msg = "hello world";
}

 

 

3、最后,我们通过一个自定义表格组件的案例,来结束UI片断传递的学习。这个案例中,我们希望实现如下功能:

①自定义表格组件的名称叫MyTable

②数据源在使用组件时传入

③表格的列数和列名,也在使用组件时再确定

//Vue=====================================
//定义两个具名插槽THead和TBody
//以属性方式传入数据源peoples
//TBody插槽,将行数据传回到父组件使用

//父组件
<template>
    <MyTable :items = "peoples">
        <template #THead>
            <th>ID</th>
            <th>姓名</th>
        </template>
        <template #TBody="TBodyProps">
            <td>{{TBodyProps.item.id}}</td>
            <td>{{TBodyProps.item.name}}</td>
        </template>
    </MyTable>
</template>

<script setup>
import MyTable from './components/MyTable.vue'
import {ref} from 'vue'
const peoples = ref([
    {id:1,name:"functionMC"},
    {id:2,name:"GongFU"},
    {id:3,name:"TaiJi"}
])
</script>


//子组件
<template>
    <table>
        <thead>
            <slot name="THead"></slot>
        </thead>
        <tbody>
            <tr v-for="item in props.items">
            <slot name="TBody" :TBodyProps="item"></slot>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps(['items'])
</script>

 

//Blazor====================================

//父组件
//使用THead和Tbody两个具名UI片断
//【T="People"】指定子组件的泛型
//context为子组件【@TBody(item)】中的item

<MyTable T="People" TItems="@peoples">
    <THead>
        <th>ID</th>
        <th>姓名</th>
    </THead>
    <TBody>
        <td>@context.Id</td>
        <td>@context.Name</td>
    </TBody>
</MyTable>

@code {
    private List<People> peoples = new List<People>
    {
        new People{Id=1,Name="functionMC"},
        new People{Id=2,Name="Shine"},
        new People{Id=3,Name="Billing"}
    };

    private class People
    {
        public int Id { get; set; }
        public string? Name { get; set; }
    }
}


//子组件
//定义了一个泛型T,数据源及其类型,以及行的类型,都应该由父组件传入
//通过【@TBody(item)】,将子组件的item传回去
//其实子组件的item来源于父组件的TItems,数据的流转有两个过程:
//①父组件将所有人peoples传递给子组件
//②子组件又将一个人people传递给父组件
@typeparam T

<table>
    <thead>
        @THead
    </thead>
    <tbody>
        @foreach (var item in TItems)
        {
            if (TItems is not null)
            {
                <tr>@TBody(item)</tr>
            }
        }
    </tbody>
</table>

@code {
    [Parameter]
    public List<T>? TItems { get; set; }
    [Parameter]
    public RenderFragment? THead { get; set; }
    [Parameter]
    public RenderFragment<T>? TBody { get; set; }
}

 

    原文作者:functionMC
    原文地址: https://www.cnblogs.com/functionMC/p/16278266.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞