動態元件
動態元件 可以用來在你的頁面中切換頁面，就像你的瀏覽器中的標籤頁一樣，透過使用 '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>
