iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
自我挑戰組

Vue.js系列 第 21

v-bind:is vs keep-alive

  • 分享至 

  • xImage
  •  

首先要介紹的是在component標籤中利用v-bind:is(v-bind縮寫是「:」所以可以直接寫成:is)讓每個component之間可以去做切換,但是當你每做一次切換他就會重新create一次,這是什麼意思呢?先來看看單純使用v-bind:is影片吧!從影片中會發現當我們在Demo3的頁籤中編輯文章按儲存後,切換到其他頁籤在切回到Demo3這個頁籤他會回到預設的文章內容,而剛才編輯的內容都會不見

雖然重新create這個方法沒有不好,但是有時候我們會希望他有cache的機制,像是如果在填表單的時候當你填完送出前想要返回前一頁看的時候就需要全部重新填寫,這是一件很累人的事,所以接下來我們要介紹的就是解決這個問題的方法,這個方法很簡單那就是使用keep-alive,我們只需要在原本的component標籤外面加上<keep-alive>就能夠讓使用者不會因為切換頁籤編輯的內容就不見了!最後的Demo就是使用<keep-alive>的效果

Demo
github


上一篇
slots
下一篇
Render Functions
系列文
Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言