本文写给对Vue组件了解的基础上，如果你不明白什么是Vue的组件，可以去官网看看Vue组件基础。
在Vue中有一个 :is 特性， 组件可以用过 :is 来切换，我们可以写一个例子来说一说 :is ；
<template>
<div>
<!--
按钮，用于切换组件
注意,此时的A为字符串而非变量
-->
<button @click="showWhat = 'A'">showA</button>
<button @click="showWhat = 'B'">showB</button>
<!--
动态切换显隐，组件
-->
<component :is="showWhat"></component>
</div>
</template>
<script>
//引入组件A以及组件B
import A from "./a";
import B from "./b";
export default {
components: {
//声明组件A,B
A,
B
},
data() {
return {
//默认显示组件A，若字符串为B则显示组件B,name为component声明
showWhat: "A"
};
}
};
</script>
<style>
</style>
讲解也在例子中包含了， 我们可以用 :is 来优雅的切换TAB， 这里我们来说一说为什么不用 v-show 来切换呢， 先说说他们之间的区别吧， V-show 会第一时间加载两个组件， 两个组件的生命周期都会触发，会造成不必要的性能浪费，而且切换的时候永远不会再创造挂载一次 Vue()，也就是说，生命周期只会触发一次， 并不优雅， 既然说到了v-show，那么相信大家都想到了v-if，如果是v-if的话 确实不会造成同事加载两个组件，不过v-if切换的话 每次都会创造挂载一次，如果没有重新渲染的需要的话 ，会造成性能浪费， 那么 :is 如何缓存呢， :is 通过 keep-alive标签缓存。被该标签包裹的组件就会被缓存下来，每次点击都不会重新渲染(即创造~挂载)。相比较于 v-show 和 v-if 来说 使用 :is 动态组件更加优雅~
<template>
<div>
<!--
按钮，用于切换组件
注意,此时的A为字符串而非变量
-->
<button @click="showWhat = 'A'">showA</button>
<button @click="showWhat = 'B'">showB</button>
<!--
动态切换显隐，组件
-->
<keep-alive :include='A' :max="10">
<component :is="showWhat"></component>
</keep-alive>
</div>
</template>
<script>
//引入组件A以及组件B
import A from "./a";
import B from "./b";
export default {
components: {
//声明组件A,B
A,
B
},
data() {
return {
//默认显示组件A，若字符串为B则显示组件B,name为component声明
showWhat: "A"
};
}
};
</script>
<style>
</style>
-
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 -
exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 -
max- 数字。最多可以缓存多少组件实例。
include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
max接受一个数字，表示最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
