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 }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!