解決Vue中 父子傳值 數(shù)據(jù)丟失問題
在Vue中，父子組件傳值，子組件通過props接收父組件傳遞的數(shù)據(jù)
父組件
questionList :傳遞數(shù)據(jù)參數(shù)
questionsLists: 傳遞數(shù)據(jù)源
子組件
porps 接收父組件方式有倆中，一種是通過對(duì)象形式，一種是通過數(shù)組形式，通過數(shù)組形式接收多個(gè)數(shù)據(jù)時(shí)用逗號(hào)隔開即可。比如：props：['a','b']。
需要注意的是在子組件中 接收父組件的數(shù)據(jù)參數(shù)，必須和父組件傳遞時(shí)的 參數(shù)一致，上圖中的 questionList
這種情況下會(huì)出現(xiàn)這么一個(gè)情況，刷新頁(yè)面之后子組件接收的父組件數(shù)據(jù)會(huì)丟失，我們可以在watch里面去監(jiān)聽一下數(shù)據(jù)的變化。
重新對(duì)數(shù)據(jù)進(jìn)行想要的處理，之后就會(huì)發(fā)現(xiàn) 怎么刷新都沒有問題了，數(shù)據(jù)都不會(huì)丟失。
-------------------------------分割線----------------------------------------
在這個(gè)過程中發(fā)現(xiàn)，在子組件的實(shí)例中 是有數(shù)據(jù)的，但是重新賦值給一個(gè)新對(duì)象，新對(duì)象的值永遠(yuǎn)是為空的。這個(gè)還沒有清楚是怎么回事。有了解的 可以告知一下呀😋
總結(jié)
以上所述是小編給大家介紹的解決Vue中 父子傳值 數(shù)據(jù)丟失問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue elementUI 自定義表單模板組件功能實(shí)現(xiàn)
在項(xiàng)目開發(fā)中，我們會(huì)遇到這種需求，在管理后臺(tái)添加自定義表單，在指定的頁(yè)面使用定義好的表單，這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12
理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實(shí)現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue 2.0 基礎(chǔ)，具體內(nèi)容有、基本語(yǔ)法、生命周期、路由管理Vue-Router、狀態(tài)管理Vuex、Http請(qǐng)求庫(kù)Axios，想詳細(xì)了解的小伙伴請(qǐng)和現(xiàn)編一起學(xué)習(xí)下面文章內(nèi)容吧2021-10-10
今天小編就為大家分享一篇解決vue點(diǎn)擊控制單個(gè)樣式的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題,需要的朋友可以參考下2018-01-01
vue項(xiàng)目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項(xiàng)目如何引入element?ui、iview和echarts，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-04-04
這篇文章主要給大家介紹了關(guān)于vue.js項(xiàng)目中實(shí)用的小技巧，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法
走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡(jiǎn)便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)Excel預(yù)覽功能使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09