Vue中的动态组件
1. 什么是动态组件?
可以改变的组件
2. 使用
通过 Vue 提供了一个 component + is 属性
3. 动态组件指的就是 component 这个组件
4. 案例
点击一个按钮进行两个组件的切换:
<body>
<div id="app">
<button @click = "change"> 切换 </button>
<!-- <keep-alive include="">
<component :is = "type"></component>
</keep-alive> -->
<component :is = "type"></component>
</div>
</body>
<script>
Vue.component('Aa',{
template: '<div> Aa </div>'
})
Vue.component('Bb',{
template: '<div> Bb </div>'
})
new Vue({
data: {
type: 'Aa'
},
methods: {
change () {
this.type = (this.type === 'Aa'?'Bb':'Aa')
}
}
}).$mount('#app')
</script>