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
}