Vue 动态组件
<KeepAlive>
运行下面的示例。 您会注意到，当您切换回某个组件时，您在一个组件中所做的更改会被忘记。 这是因为组件被卸载并再次安装，从而重新加载该组件。
示例
此示例与前面的示例相同，只是组件不同。 在 comp-one 中，您可以在"Apple"和"Cake"之间进行选择，在 comp-two 中，您可以编写一条消息。 当您返回组件时，您的输入将会消失。
为了保持状态、您之前的输入，当返回组件时，我们在 <component> 标签周围使用 <KeepAlive> 标签。
示例
The components now remember the user inputs.
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>
