1、 什么是动态组件
动态组件是指：在一个挂载点使用多个组件，并进行动态切换。可能对于新手来说，这句话有些难理解，什么是挂载点? 可以简单的理解为页面的一个位置。
最常见的就是：tab 的切换功能。
在 vue 要实现这个功能通常用两种方式。一是使用<component>元素的 is 的特性，二是使用 v-if 。
方式一：
<template>
<div class="hello">
<h3>使用component 的 is特性</h3>
<ul>
<li
v-for="(item,index) in tabList"
:key="index"
style="cursor:pointer"
@click="changeView(index)">
{{item}}</li>
</ul>
<component :is="currentView"></component>
</div>
</template>
<script>
// 相关的组件代码在这里不展示
import shouji from "./shouji";
import pc from "./pc";
import shuma from "./shuma";
export default {
name: "HelloWorld",
components: {
shouji,
pc,
shuma,
},
data() {
return {
index: 0,
arr: ["shuma", "shouji", "pc"],
tabList: ["数码", "手机", "电脑"],
};
},
computed: {
currentView() {
return this.arr[this.index];
}
},
methods: {
changeView(index) {
this.index = index;
}
},
};
</script>大约 3 分钟