Blazor和Vue对比学习（小知识点-2）：动态组件，component和DynamicComponent

1、Vue的动态组件为component，有一个is属性，通过控制is属性来完成组件的动态切换。组件切换时，被切走的组件被销毁，状态无法保存。可以结合KeepAlive，实现状态的保存。

<template>
    <button @click="()=>isTab1 = !isTab1">切换组件</button>
    <keep-alive>
        <component :is="isTab1?Tab1:Tab2"></component>
    </keep-alive>
    
</template>

<script setup>
import Tab1 from './components/Tab1.vue'
import Tab2 from './components/Tab2.vue'
import {ref} from 'vue'
const isTab1 = ref(false)

</script>

 

2、Blazor的动态组件为DynamicComponent，有两个属性，其中属性Type接收Type类型参数，可以通过【typeof(组件类名)】的方式获得组件的元数据。另一个属性为Parameters，必须是字典类型Dictionary<string,object>。切换的组件可以接受传递的参数，接收方法见下面的案例。可惜的是，Blazor没有类似Vue的KeepAlive组件，切换组件时，数据状态无法保留，需要通过其它办法来解决这个问题。

<button @onclick="@(()=>{isTab1 = !isTab1;})">切换组件</button>
<DynamicComponent Type="@(isTab1?typeof(Tab1):typeof(Tab2))" Parameters="@message"></DynamicComponent>

@code{
    private bool isTab1 = true;
    //属性Parameters必须是一个字典类型
    //Tab1或Tab2组件接收数据时，接收属性的类型对应value的类型，名称对应字典的key
    private Dictionary<string,object> message = new Dictionary<string,object>{
        {"name","functionMC"},
        {"age",18}
    };
}


//Tab1组件
<h3>这是Tab1组件</h3>
<input placeholder="请输入文字"/>
<button @onclick="@(()=>{a++;})">点击增加</button>
<span>@a</span>
<h3>以下为动态组件传递过来的数据</h3>
<h5>Name:@Name</h5>
<h5>Age:@Age</h5>

@code {
    private int a = 0;
    [Parameter]
    public string Name { get; set; } //接收键Name的Value
    [Parameter]
    public int Age { get; set; } //接收键Age的Value
}


//Tab2组件
<h3>这是Tab2组件</h3>
<h3>以下为动态组件传递过来的数据</h3>
<h5>Age:@Age</h5>

@code {
    [Parameter]
    public int Age { get; set; } //接收键Age的Value
}