Vue <component> 实现组件动态加载
Vue 大约 675 字动态组件
Vue 提供内置的<component>
标签,来实现动态组件的渲染。
is 属性
<component>
中is
属性表示动态组件需要渲染的具体组件名称。
示例
注意:动态组件切换时,每次都会销毁旧的组件和创建新的组件,都需要走完整生命周期。
<template>
<div>
<component is="FakeComA"></component>
<component :is="componentName"></component>
<button @click="componentName = 'FakeComB'">切换组件</button>
</div>
</template>
<script>
import FakeComA from "@/components/FakeComA";
import FakeComB from "@/components/FakeComB";
export default {
name: "DynamicComponent",
components: {FakeComB, FakeComA},
data: () => {
return {
componentName: "FakeComA"
}
},
}
</script>
阅读 140 · 发布于 2022-12-27
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
软考-系统架构设计师:DNS 协议阅读 3134
-
Java 中判断奇偶性的方法阅读 1582
-
JMeter 使用 Critical Section Controller 按顺序执行接口阅读 1471
-
设计模式之观察者模式阅读 1777
-
Spring Boot Tomcat 启动流程阅读 1140
-
Linux sed 命令查看文件指定行数内容阅读 2737
-
Spring Boot 使用 Validated group 分组校验阅读 457
-
PHP No input file specified 解决办法阅读 1469
-
Spring 事务结束后进行耗时操作阅读 298
-
Redis 线上禁用命令阅读 2101