Vue.js之動態元件
阿新 • • 發佈:2019-01-01
①簡單來說:
就是幾個元件放在一個掛載點下,然後根據父元件的某個變數來決定顯示哪個,或者都不顯示。
②動態切換:
在掛載點使用component標籤,然後使用v-bind:is=”元件名”,會自動去找匹配的元件名,如果沒有,則不顯示;
改變掛載的元件,只需要修改is指令的值即可。
如示例程式碼:
<div id="app">
<button @click="toshow">點選讓子元件顯示</button>
<component v-bind:is="which_to_show"></component>
</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 < 3) {
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>
說明:
點選父元件的按鈕,會自動切換顯示某一個子元件(根據which_to_show這個變數的值來決定)。
③keep-alive
簡單來說,被切換掉(非當前顯示)的元件,是直接被移除了。
在父元件中檢視this.$children屬性,可以發現,當子元件存在時,該屬性的length為1,而子元件不存在時,該屬性的length是0(無法獲取到子元件);
假如需要子元件在切換後,依然需要他保留在記憶體中,避免下次出現的時候重新渲染。那麼就應該在component標籤中新增keep-alive屬性。
如程式碼:
<div id="app">
<button @click="toshow">點選讓子元件顯示</button>
<component v-bind:is="which_to_show" keep-alive></component>
</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 < 3) {
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>
說明:
初始情況下,vm.$children屬性中只有一個元素(first元件),
點選按鈕切換後,vm.$children屬性中有兩個元素,
再次切換後,則有三個元素(三個子元件都保留在記憶體中)。
之後無論如何切換,將一直保持有三個元素。