動態組件使用詳解

 

<component v-bind:is="currentTabComponent"></component>

何為動態組件，如上代碼所示，即利用 is 特性，來切換不同的組件，即為動態組件。

動態組件保持狀態

有時候，我們希望能保持被動態加載組件的狀態，已避免反復重復渲染導致的性能問題。為了能實現保持組件狀態的功能，我們可以用一個 <keep-alive> 的元素將其動態組件包裹起來。

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

雖然用keep-alive會緩存組件，但是也同樣帶來了問題，就是當我們第二次進入頁面時，組件的created和mounted函數不再觸發

對於這一問題，有兩個解決方案：

• 增加activated()函數,每次進入新頁面的時候再獲取一次數據
• 在keep-alive中增加一個過濾exclude：name（組件的name）這個方法適用於其中單個

<keep-alive exclude="name">
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

這樣，我們就可以在每次進入頁面的時候去初始化該頁面的數據了。