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>
阅读 1758 · 发布于 2022-12-27
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓
昵称:
随便看看
换一批
-
Docker 容器间网络通讯阅读 1301
-
Android 监听 SIM 卡状态阅读 5981
-
Android WindowManager 背景暗化阅读 4455
-
Java 并发编程之 AQS ReentrantLock 公平锁源码解析阅读 1694
-
Spring Boot OpenFeign PATCH 请求报错:java.net.ProtocolException: Invalid HTTP method: PATCH阅读 1549
-
Nginx 配置之 worker_processes阅读 4705
-
Vue watch 监听器阅读 740
-
k6 压测 HTTPS 接口报 X509 certificate signed by unknown authority阅读 2456
-
MySQL 之 root 用户无法启动阅读 6557
-
Java 并发编程之 AtomicMarkableReference阅读 1418