动态组件
动态组件 可以用来在你的页面中切换页面,就像你的浏览器中的标签页一样,通过使用 '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>
运行示例 »