vue中，component动态组件的三种方式 & keep-alive实现动态组件的缓存
1、什么是动态组件
定义:
多个组件挂载到同一个组件上，通过参数动态的切换不同组件就是动态组件。
书写形式：
<component :is="componentName"></component>
内置组件：
component：是vue里面的一个内置组件。
vue内置的组件还包括：
- transition：作为单个元素/组件的过渡效果
- transition-group：作为多个元素/组件的过渡效果。
- keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
- slot：作为组件模板之中的内容分发插槽
2、使用方式
通过使用元素动态的绑定到它的is特性，来实现动态组件的切换。
如果is匹配不到相应的组件的时候是不尽行任何dom元素的渲染的
2.1、已注册组件的名字----适用于少量组件动态切换的情况
<template>
<div class="btn_box">
<button @click="changePage(0)">关于</button>
<button @click="changePage(1)">详情</button>
<button @click="changePage(2)">主页</button>
<component :is="list[idx]"></component>
</div>
</template>
<script>
import About from './About'
import Detail from './Detail'
import Home from './Home'
export default {
name: 'index',
components: {
About,
Detail,
Home
},
data(){
return {
idx: 0,
list: ['About', 'Detail', 'Home']
}
},
methods: {
// 切换页面
changePage(idx){
this.idx = idx;
}
}
}
</script>
<style>
.btn_box {
margin-bottom: 20px;
}
.btn_box button {
margin-right: 5px;
}
</style>
2.2、vue组件中引入的组件----适用于多个组件动态切换的情况
componentPage.js
import About from './About'
import Detail from './Detail'
import Home from './Home'
export default [
About,
Detail,
Home
]
index.vue
- 引入的组件必须定义在data中，不可以直接在组件中使用
<template>
<div class="btn_box">
<button @click="changePage(0)">关于我们</button>
<button @click="changePage(1)">详情</button>
<button @click="changePage(2)">主页</button>
<component :is="componentPage[idx]"></component>
</div>
</template>
<script>
import componentPage from './componentPage'
export default {
name: 'index',
data(){
return {
componentPage,
idx: 0
}
},
methods: {
// 切换页面
changePage(idx){
this.idx = idx;
}
}
}
</script>
<style>
.btn_box {
margin-bottom: 20px;
}
.btn_box button {
margin-right: 5px;
}
</style>
2.3、全局注册的组件Vue.component----适用于全局组件的动态切换
main.js
import Vue from 'vue'
import App from './App.vue'
import About from './views/About'
import Detail from './views/Detail'
import Home from './views/Home'
Vue.config.productionTip = false
Vue.component("About", About)
Vue.component("Detail", Detail)
Vue.component("Home", Home)
new Vue({
render: h => h(App),
}).$mount('#app')
]
index.vue
<template>
<div>
<div class="btn_box">
<button @click="changePage(0)">关于我们</button>
<button @click="changePage(1)">详情</button>
<button @click="changePage(2)">主页</button>
</div>
<component :is="list[idx]"></component>
</div>
</template>
<script>
export default {
name: 'index',
data(){
return {
idx: 0,
list: ['About', 'Detail', 'Home'],
}
},
methods: {
// 切换页面
changePage(idx){
this.idx = idx;
}
}
}
</script>
<style>
.btn_box {
margin-bottom: 20px;
}
.btn_box button {
margin-right: 5px;
}
.about_sty {
background-color: darkseagreen;
}
.home_sty {
background-color: aqua;
}
.detail_sty {
background-color: coral;
}
</style>
3、动态组件的缓存
使用动态组件来回切换时，组件是要被销毁的，若不想让数据销毁可以使用，它可以包裹动态组件，这样就不会被销毁。
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
4、总结
使用动态组件就可以像使用实际组件一样，开发体验上实现零差别，代码处理逻辑实现解耦。
