动态组件
动态组件 可以用来在你的页面中切换页面，就像你的浏览器中的标签页一样，通过使用 'is' 属性。
组件标签和 'is' 属性
要创建一个动态组件，我们使用 <component> 标签来表示活动组件。 'is' 属性通过 v-bind 绑定到一个值，我们改变这个值来表示我们想要激活的组件的名称。
示例
在这个例子中，我们有一个 <component> 标签，它充当 comp-one 组件或 comp-two 组件的占位符。 'is' 属性设置在 <component> 标签上，并监听计算值 'activeComp'，该值保持 'comp-one' 或 'comp-two' 作为值。我们还有一个按钮，它在 'true' 和 'false' 之间切换一个数据属性，以便计算值在活动组件之间切换。
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
<KeepAlive>
运行下面的示例。你会注意到，当您切换回一个组件时，您在该组件中所做的更改会被遗忘。这是因为组件被卸载并重新挂载，重新加载组件。
示例
这个示例与之前的示例相同，只是组件不同。在 comp-one 中，你可以选择 'Apple' 或 'Cake'，在 comp-two 中，你可以写一条消息。当你返回一个组件时，你的输入会消失。
要保留状态（即您之前的输入），当我们返回到组件时，我们使用 <KeepAlive> 标签包裹 <component> 标签。
示例
现在组件可以记住用户输入了。
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
'include' 和 'exclude' 属性
默认情况下，<KeepAlive> 标签内的所有组件都将被保留。
但是，我们也可以通过在 <KeepAlive> 标签上使用 'include' 或 'exclude' 属性来定义只保留某些组件。
如果我们对 <KeepAlive> 标签使用 'include' 或 'exclude' 属性，我们也需要使用 'name' 选项为组件命名。
CompOne.vue:
<script>
export default {
name: 'CompOne',
data() {
return {
imgSrc: 'img_question.svg'
}
}
}
</script>
示例
使用 <KeepAlive include="CompOne">，只有 'CompOne' 组件会记住它的状态（之前的输入）。
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive include="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
我们也可以使用 'exclude' 来选择保留哪些组件，哪些不保留。
示例
使用 <KeepAlive exclude="CompOne">，只有 'CompTwo' 组件会记住它的状态。
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
'include' 和 'exclude' 都可以通过逗号分隔来使用多个组件。
为了展示这一点，我们将添加另一个组件，总共三个组件。
示例
使用 <KeepAlive include="CompOne, CompThree">，'CompOne' 和 'CompThree' 组件都会记住它们的状态。
App.vue:
<template>
<h1>Dynamic Components</h1>
<button @click="compNbr++">
Next component
</button>
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
</template>
'max' 属性
我们可以使用 'max' 作为 <KeepAlive> 标签的属性，来限制浏览器需要记住状态的组件数量。
示例
使用 <KeepAlive :max="2">，浏览器只会记住用户访问过的最后两个组件的输入。
App.vue:
<template>
<h1>Dynamic Components</h1>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
</template>
