首頁 > web前端 > Vue.js > 主體

深入了解Vue中的動態元件

青灯夜游
發布: 2022-11-11 18:40:51
轉載
1459 人瀏覽過

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

深入了解Vue中的動態元件

1、什麼是動態元件

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

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

vue 提供了一個內建的<component></component> 元件,專門用來實作動態元件的渲染。範例程式碼如下:
深入了解Vue中的動態元件

3、使用keep-alive 保持狀態

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

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

  • ##當元件

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

  • 當元件

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

範例程式碼如下:


深入了解Vue中的動態元件

小提醒:

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

5、keep-alive 的include 屬性

#include 屬性用來指定:只有

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

範例程式碼如下:


深入了解Vue中的動態元件

(學習影片分享:

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

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

相關標籤:
vue
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板