Vue <component> 实现组件动态加载
Vue About 675 words动态组件
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>
Views: 2,159 · Posted: 2022-12-27
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...