动态组件
动态组件可以使用“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>
<保持活力>
运行下面的示例。您会注意到，当您切换回某个组件时，您在一个组件中所做的更改会被忘记。这是因为组件被卸载并再次安装，从而重新加载该组件。
示例
此示例与前面的示例相同，只是组件不同。在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>
“包含”和“排除”属性
里面的所有组件<KeepAlive>默认情况下，标签将保持活动状态。
但是我们也可以通过在<KeepAlive>标签。
如果我们在<KeepAlive>标签中我们还需要使用 '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>
我们还可以使用“排除”来选择哪些组件保持活动状态或不保持活动状态。
示例
和<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>
通过使用逗号分隔，“包含”和“排除”都可以与多个组件一起使用。
为了展示这一点，我们将再添加一个组件，这样我们总共就得到了三个组件。
示例
和<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”作为属性<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>
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!