在Vue中我们可以通过动态组件实现在多个组件之间进行切换。会用到的技术点是:
<!--组件占位符-->
<component></component>
<!-- 根据:is 指定组件名称,将对应的组件渲染到组件占位符中 -->
<component :is='xxx'></component>
首先看下面的例子:
<div id="test">
<div class="head">
<button @click="changeCity('meiguo')" type="button">美国</button>
<button @click="changeCity('faguo')" type="button">法国</button>
<button @click="changeCity('yindu')" type="button">印度</button>
</div>
<!-- 将对应的组件渲染到这面 -->
<component :is="currentCity"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#test',
data: {
currentCity: 'meiguo'
},
methods: {
changeCity: function(cityName){
this.currentCity = cityName;
}
},
components: {
meiguo: {
template: `<div class="body">我是美国</div>`
},
faguo: {
template: `<div class="body">我是英国</div>`
},
yindu: {
template: `<div class="body">我是印度</div>`
}
}
})
</script>
动态组件的缓存
默认情况下,切换动态组件,会重新渲染,这不仅会带来性能问题,同时也不能保持组件的状态,比如我们看下面这个例子:
<div id="test">
<div class="head">
<button @click="changeCity('meiguo')" type="button">美国</button>
<button @click="changeCity('faguo')" type="button">法国</button>
<button @click="changeCity('yindu')" type="button">印度</button>
</div>
<!-- 将对应的组件渲染到这面 -->
<component :is="currentCity"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#test',
data: {
currentCity: 'meiguo'
},
methods: {
changeCity: function(cityName){
this.currentCity = cityName;
}
},
components: {
zhengzhou: {
template: `<div class="body">我是美国,您是谁啊?<input type='text'></div>`
},
luoyang: {
template: `<div class="body">我是法国,您是谁啊?<input type='text'></div>`
},
kaifeng: {
template: `<div class="body">我是印度,您是谁啊?<input type='text'></div>`
}
}
})
</script>
我们可以看到,如果我在一个组件中输入内容,然后切换到其他组件后在切换回来,我们之前输入的内容则不能被保存。如果我们想保留组件的状态的话,可以使用动态组件的缓存。使用起来也比较简单,只需在组件占位符的外面包一层<keep-alive></keep-alive>
标签即可。
<keep-alive>
<component :is="currentCity"></component>
</keep-alive>
keep-alive 的属性
keep-alive
目前支持3个属性
-
exclude
:名称匹配的组件不会被缓存,其值可以是字符串或者正则表达式<keep-alive exclude="meiguo"> <!--除了名字叫zhengzhou的都会被缓存--> <component :is="currentCity"></component> </keep-alive>
-
include
:只有名称匹配的组件会被缓存,其值可以是字符串或者正则表达式<keep-alive include="faguo"> <!--只有名字叫luoyang的才会被缓存--> <component :is="currentCity"></component> </keep-alive>
-
max
:最多可以缓存多少个组件,其值是数字<keep-alive max="2"> <!--最多缓存最近的2个组件--> <component :is="currentCity"></component> </keep-alive>
注意事项:
-
值为正则表达式的时候,必须使用
v-bind
进行绑定<keep-alive :include="/o/"> <component :is="currentCity"></component> </keep-alive>
-
exclude
比include
的优先级高,不支持字符串和正则<keep-alive :include="/o/" exclude="meiguo"> <component :is="currentCity"></component> </keep-alive>
-
需要匹配多个组件名称的时候,可以使用英文逗号,且中间不能有空格
<keep-alive include="meiguo,yindu"> <component :is="currentCity"></component> </keep-alive>
Vue官网教程:动态组件