iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手遇上Vue.js系列 第 24

Day24 動態組件 Dynamic Components

  • 分享至 

  • xImage
  •  

Keep-alive
有時我們會希望資料狀態能夠保存下來,避免再次載入時資料消失,這時我們的外層就會放上

範例
如下當放上了就會在first輸入並點下second重新載入時,保留之前所加入的資料
!
https://ithelp.ithome.com.tw/upload/images/20211008/20140076bGkbv89zMD.pnghttps://ithelp.ithome.com.tw/upload/images/20211008/20140076OSXcxm9Yf0.png
https://ithelp.ithome.com.tw/upload/images/20211008/20140076Wc9SEO9nBS.png
https://ithelp.ithome.com.tw/upload/images/20211008/20140076yXG3CqDZTn.png

常用屬性

  • include : 字串、表達式、陣列→只有在名稱相同的元件才會被緩存
    https://ithelp.ithome.com.tw/upload/images/20211008/201400764zNCNrgYt8.png
  • exclude : 字串、表達式、陣列→名稱相同的元件都不會被緩存
  • max : 數字→緩存元素實例最大數字為了效能不被過多的緩存降低,因此我們可以設定最多要保留幾組
    https://ithelp.ithome.com.tw/upload/images/20211008/20140076H4mARnFqRD.png

小提醒 : 一次僅渲染一個子元素,若使用v-for則不會觸發

今天介紹了動態組件,這個功能可說是非常的實用,確保著資料的保存,include與exclude可以設定是否保留資料,max則可以設定保存數量的上限,明天會來介紹非動態組件

參考資料: https://vuejs.org/v2/api/#keep-alive
https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components


上一篇
Day 23 Vue生命週期
下一篇
Day25 非動態組件 Async Components
系列文
新手遇上Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言