iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

是vue不是view系列 第 25

[Day 25] keep-alive狀態保留

  • 分享至 

  • xImage
  •  

今天這篇是延續上篇的動態元件~在動態元件切換的過程中,每當我們切換一個新的元件,舊元件的資料就會消失,如果我們希望可以保留元件的狀態,像是使用者輸入的資料等等,該怎麼做呢??(發現我很愛自問自答-O-)
只需要使用今天講的keep-aive就可以了!!

開始!!

下面的範例和昨天那篇相比,在<component>外面包了<keep-alive>來保存使用者輸入的資料
也在"你超可愛"後面加了可以讓使用者輸入資料的text
https://ithelp.ithome.com.tw/upload/images/20211006/20139392C829ARdJSS.png
當我們在"你超可愛"後面打上文字內容,切換畫面再切回去,剛剛輸入的文字還會存在,如果沒用keep-alive則不會保留。
來看看實際操作是長怎樣吧~(畫質可能有點差(;´д`)ゞ)
Yes

結語

耶!今天就到這邊結束~馬上就是雙十節了,必須讓自己好好放假才行對吧(^∀^●)ノシ大家都要睡超過中午12點歐!!


上一篇
[Day 24] 動態元件v-bind:is
下一篇
[Day 26] 組件基礎
系列文
是vue不是view30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ㄆㄩ
iT邦新手 4 級 ‧ 2021-10-09 21:13:48

我有睡到超過12點!/images/emoticon/emoticon07.gif

我要留言

立即登入留言