动态组件
- 什么是动态组件?
可以改变的组件 - 使用
通过 Vue 提供了一个 component + is 属性 - 动态组件指的就是 component这个组件
- 案例
<div id="app"> <button @click = "change"> 切换 </button> <keep-alive include=""> <component :is = "type"></component> </keep-alive> </div>
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')
- Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存,这样当我们切换组件时,就可以大大提高使用效率
- keep-alive也可以以属性的形式呈现,但是我们如果搭配component的话,建议使用组件的形式
---------------------------------------------若有疑虑详见Vue进阶Day02