在一个挂载点使用多个组件,并进行动态切换,使用<component>
元素的 is 的特性
<!-- 动态组件由 vm 实例的 componentName 控制 -->
<component :is="componentName"></component>
根据绑定的is
的值决定哪个组件被渲染
<template>
<div class="hello">
<ul>
<li
v-for="(item,index) in tab"
:key="index"
style="cursor:pointer"
@click="changeView(index)">
{
{item}}
</li>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
arr: ["inputDatePicker", "inputSelect", "inputName"], // 组件已在main.js全局引入
tab: ["时间选择器组件", "下拉框组件", "顾客姓名输入框组件"],
};
},
computed: {
currentView() {
return this.arr[this.index];
}
},
methods: {
changeView(index) {
this.index = index;
}
},
// keep-alive 两个生命周期
activated() {
console.log("inputDatePicker 时间选择器组件被添加");// 被缓存的组件激活时触发
},
deactivated() {
console.log("inputDatePicker 时间选择器组件被移除"); // 被切换到其他组件时触发
}
};
</script>