您的位置:首页 > Web前端 > Vue.js

Blazor和Vue对比学习(知识点杂锦3.02):动态组件,component和DynamicComponent

2022-05-13 22:14 1076 查看 https://www.cnblogs.com/functi

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
}

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: