可以透過在component裡面加入一個is屬性，依據傳入的參數不同，再對應的元件間進行動態的切換。
<body>
<div id="app">
<button v-for='tab in tabs' v-bind:key='tab' v-on:click="currentTab = tab">
{{tab}}
</button>
<!-- 元件會在currentComponent改變時改變 -->
<component v-bind:is="currentTabComponent"></component>
</div>
<script>
Vue.component('tab-home', {
template: `<div>Home component</div>`
});
Vue.component('tab-posts', {
template: `<div>Posts component</div>`
});
Vue.component('tab-archive', {
template: `<div>Archive component</div>`
});
new Vue({
el: '#app',
data: {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
},
computed: {
currentTabComponent: function () {
return "tab-" + this.currentTab.toLowerCase();
}
}
})
</script>
</body>
我們可以看到component會依照is帶入的值來動態決定載入哪個元件
我們在切換的過程可能會希望能保存原本元件的狀態，這時候可以用keep-alive將想要保存的包起來，來達到效果：
<style>
ul {
display: flex;
list-style: none;
}
a {
text-decoration: none;
}
li {
background: #e0e0e0;
margin: 0 5px;
padding: 10px;
list-style: none;
}
li:hover {
background: red;
}
</style>
<body>
<div id="app">
<ul>
<li><a href="#" @click.prevent="changeView('home')">Home</a></li>
<li><a href="#" @click.prevent="changeView('posts')">Posts</a></li>
<li><a href="#" @click.prevent="changeView('archive')">Archive</a></li>
</ul>
<div>
<h3>With keep-alive</h3>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</div>
<div>
<h3>Without keep-alive</h3>
<component :is="view"></component>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
view: 'home'
},
methods: {
changeView(viewName) {
this.view = viewName;
}
},
components: {
home: {
template: '<p>This is home <input type="text" placeholder="Text me!"></p>'
},
posts: {
template: '<p>This is Posts <input type="text" placeholder="Text me!"></p>'
},
archive: {
template: '<p>This is Archive <input type="text" placeholder="Text me!"></p>'
}
}
})
</script>
</body>
上述範例可以試看看在Home的With keep-alive 和 Without keep-alive都輸入一些東西，然後切換到Posts在切換回Home看是哪邊還有你剛剛輸入的～
在keep-alive也提供了如果要切換的子元件太多的屬性：
<div>
<keep-alive :include="'posts,archive'">
<component :is="view"></component>
</keep-alive>
</div>
我們修改了上面的範例，只針對posts和archive的值做保留。
<div>
<keep-alive :exclude="'posts'">
<component :is="view"></component>
</keep-alive>
</div>
除了posts以外的都做保留
<div>
<keep-alive :max="2">
<component :is="view"></component>
</keep-alive>
</div>
這邊我們設定2個，當你在Home、Posts和Archive依序輸入一些東西，再回頭看他只會保留Posts和Archive內的值。
:is=""(v-bind:is=""的縮寫)
這邊也幫自己複習一下縮寫（可以幫助在撰寫上少打幾個字v-bind = :v-on = @
iThome鐵人賽
看影片追技術