动态组件
动态组件 可以使用 '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 中，您可以编写一条消息。当您返回到组件时，您的输入会消失。
为了保留状态，也就是您之前的输入，当您返回到组件时，我们在 <component> 标签周围使用 <KeepAlive> 标签。
示例
现在组件会记住用户的输入。
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>
