通過使用保留的 <component> 元素，動態地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，并動態切換。根據 v-bind:is="組件名" 中的組件名去自動匹配組件，如果匹配不到則不顯示。
- 改變掛載的組件，只需要修改is指令的值即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 動態組件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>點擊顯示子組件</button>
<component v-bind:is="which_to_show"></component>
</div>
<script>
// 創建根實例
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.which_to_show);
if(index<2){
this.which_to_show = arr[index+1];
}else{
this.which_to_show = arr[0];
}
}
},
components:{
first:{
template:'<div>這是子組件1<div>'
},
second:{
template:'<div>這是子組件2<div>'
},
third:{
template:'<div>這是子組件3<div>'
},
}
})
</script>
</body>
</html>
image.png
keep-alive
動態切換掉的組件（非當前顯示的組件）是被移除掉了，如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 動態組件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>點擊顯示子組件</button>
<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
</div>
<script>
創建根實例
new Vue({
el: '#app',
data:{
which_to_show:'first'
},
methods:{
toShow:function(){
var arr = ["first","second","third"];
var index = arr.indexOf(this.which_to_show);
if(index<2){
this.which_to_show = arr[index+1];
}else{
this.which_to_show = arr[0];
} console.log(this.$children);
}
},
components:{
first:{
template:'<div>這是子組件1<div>'
},
second:{
template:'<div>這是子組件2<div>'
},
third:{
template:'<div>這是子組件3<div>'
},
}
})
</script>
</body>
- 說明：
初始情況下，vm.children屬性中有兩個元素，
再次切換后，則有三個元素（三個子組件都保留在內存中）。
之后無論如何切換，將一直保持有三個元素。 - actived鉤子
可以延遲執行當前的組件。
具體用法來說，activate是和template、data等屬性平級的一個屬性，形式是一個函數，函數里默認有一個參數，而這個參數是一個函數，執行這個函數時，才會切換組件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 動態組件</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click='toShow'>點擊顯示子組件</button>
<!----或者<component v-bind:is="which_to_show" keep-alive></component>也行----->
<keep-alive>
<component v-bind:is="which_to_show" ></component>
</keep-alive>
</div>
<script>
// 創建根實例
var vm = new Vue({
el: '#app',
data: {
which_to_show: "first"
},
methods: {
toShow: function () { //切換組件顯示
var arr = ["first", "second", "third", ""];
var index = arr.indexOf(this.which_to_show);
if (index < 2) {
this.which_to_show = arr[index + 1];
} else {
this.which_to_show = arr[0];
}
console.log(this.$children);
}
},
components: {
first: { //第一個子組件
template: "<div>這里是子組件1</div>"
},
second: { //第二個子組件
template: "<div>這里是子組件2，這里是延遲后的內容：{{hello}}</div>",
data: function () {
return {
hello: ""
}
},
activated: function (done) { //執行這個參數時，才會切換組件
console.log('hhh')
var self = this;
var startTime = new Date().getTime(); // get the current time
//兩秒后執行
while (new Date().getTime() < startTime + 2000){
self.hello='我是延遲后的內容';
}
}
},
third: { //第三個子組件
template: "<div>這里是子組件3</div>"
}
}
});
</script>
</body>
image
當切換到第二個組件的時候，會先執行activated鉤子，會在兩秒后顯示組件2.起到了延遲加載的作用。
