什麼是動態元件?這篇文章帶大家詳細了解一下Vue入門必備知識中的動態元件,介紹如何實現動態元件渲染、keep-alive元件,希望對大家有幫助!
1、什麼是動態元件
動態元件指的是動態切換組件的顯示與隱藏。 (學習影片分享:vue影片教學)
2、如何實作動態元件渲染
vue 提供了一個內建的<component></component>
元件,專門用來實作動態元件的渲染。範例程式碼如下:
3、使用keep-alive 保持狀態
預設情況下,切換動態元件時無法保持元件的狀態。此時可以使用vue 內建的 <keep-alive></keep-alive>
元件來保持動態元件的狀態。範例程式碼如下:
4、keep-alive 對應的生命週期函數
被快取時,會自動觸發元件的deactivated 生命週期函數。
被啟動時,會自動觸發元件的activated 生命週期函數。
小提醒:
會把內部的元件進行緩存,而不是銷毀元件;
的時候,可以透過
include 指定哪些元件需要被快取;或者,透過
exclude 屬性指定哪些元件不需要被快取;但是:不要同時使用
include 和
exclude 這兩個屬性;
5、keep-alive 的include 屬性
#include 屬性用來指定:只有名稱符合的元件會被緩存。多個元件名稱之間使用英文的逗號分隔:
以上是深入了解Vue中的動態元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!