Vue.js動態組件解析

2019 年 12 月 25 日
筆記

什麼是動態組件綁定？簡單的說，就是幾個組件放在一個掛載點下，然後根據父組件的某個變數來決定顯示哪個，或者都不顯示。

is屬性

在掛載點使用component標籤，然後使用v-bind:is="組件名"，會自動去找匹配的組件名，如果沒有，則不顯示；改變掛載的組件，只需要修改is指令的值即可。 HTML：

1234567891011121314

<div id="example"> <input type="radio" id="one" value="fast" v-model="currentView" /> <label for="one">fast</label> <br /> <input type="radio" id="two" value="bus" v-model="currentView" /> <label for="two">bus</label> <br /> <input type="radio" id="three" value="business" v-model="currentView" /> <label for="three">business</label> <component :is="currentView"> <!– 組件在 vm.currentView 變化時改變 –> </component></div>

JS：

123456789101112	//創建根實例new Vue({ el: "#example", data: { currentView: 'bus' }, components: { fast: {template: '<div>滴滴快車</div>'}, bus: {template: '<div>滴滴巴士</div>'}, business: {template: '<div>滴滴專車</div>'} }});

通過is屬性綁定的vm.currentView變數值，控制展示的組件，在線查看效果

keep-alive

簡單來說，被切換掉（非當前顯示）的組件，是直接被移除了。如果把切換出去的組件保留在記憶體中，則可以保留它的狀態或避免重新渲染。為此，可以添加一個keep-alive指令參數。

1234	<keep-alive> <!– 非活動組件將被快取 –> <component :is="currentView"></component></keep-alive>

Vue.js為其組件設計了一個keep-alive特性，如果這個特性存在，那麼在組件被重複創建時，會通過快取機制快速創建組件，以提升視圖更新性能。

activate鉤子

簡單來說，他是延遲載入。例如，在發起ajax請求時，會需要等待一些時間，假如我們需要在ajax請求完成後，再進行載入，那麼就需要用到activate鉤子了。

具體用法來說，activate是和template、data等屬性平級的一個屬性，形式是一個函數，函數里默認有一個參數，而這個參數是一個函數，執行這個函數時，才會切換組件。

123456789	Vue.component('activate-example', { activate(done) { let _this = this; loadDataAsync(function(data) { _this.someData = data; done(); }); }});

activate鉤子只作用於動態組件切換或靜態組件初始化渲染的過程中，不作用於使用實例方法手工插入的過程中。