深入了解Vue中的動態元件

什麼是動態元件？這篇文章帶大家詳細了解一下Vue入門必備知識中的動態元件，介紹如何實現動態元件渲染、keep-alive元件，希望對大家有幫助！

1、什麼是動態元件

動態元件指的是動態切換組件的顯示與隱藏。 （學習影片分享：vue影片教學）

2、如何實作動態元件渲染

vue 提供了一個內建的<component></component> 元件，專門用來實作動態元件的渲染。範例程式碼如下：

3、使用keep-alive 保持狀態

預設情況下，切換動態元件時無法保持元件的狀態。此時可以使用vue 內建的 <keep-alive></keep-alive> 元件來保持動態元件的狀態。範例程式碼如下：

4、keep-alive 對應的生命週期函數

• ##當元件

  被快取時，會自動觸發元件的deactivated 生命週期函數。

• 當元件

  被啟動時，會自動觸發元件的activated 生命週期函數。

範例程式碼如下：

小提醒：

• keep -alive 會把內部的元件進行緩存，而不是銷毀元件；
使用
• keep-alive 的時候，可以透過include 指定哪些元件需要被快取；或者，透過exclude 屬性指定哪些元件不需要被快取；但是：不要同時使用include 和exclude 這兩個屬性；

5、keep-alive 的include 屬性

#include 屬性用來指定：只有

名稱符合的元件會被緩存。多個元件名稱之間使用英文的逗號分隔:

範例程式碼如下：

（學習影片分享：

web前端開發、程式設計基礎影片）

以上是深入了解Vue中的動態元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！