Vue 中的动态组件是指可以根据条件动态切换组件的显示与隐藏。Vue 提供了一个内置的组件,专门用来实现动态组件的渲染。
以下是一个简单的示例,演示如何使用 Vue 的动态组件:
<template>
<div>
<button @click="changeDiv">切换组件</button>
<component :is="selectC"></component>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import HC from './components/HC.vue';
export default {
name: 'App',
data() {
return {
selectC: 'HelloWorld',
};
},
components: {
HelloWorld,
HC,
},
methods: {
changeDiv() {
this.selectC = this.selectC === 'HelloWorld' ? 'HC' : 'HelloWorld';
},
},
};
</script>
在这个示例中,我们使用了一个按钮来切换显示的组件。当点击按钮时,changeDiv
方法会将selectC
的值切换为HC
或HelloWorld
,然后根据selectC
的值来渲染相应的组件。
请注意,在使用动态组件时,需要确保正确地注册和导入组件。另外,为了保持组件的状态,可以使用组件来缓存动态组件的内容。