解決Vue中 父子傳值 數(shù)據(jù)丟失問題
在Vue中,父子組件傳值,子組件通過props接收父組件傳遞的數(shù)據(jù)
父組件
questionList :傳遞數(shù)據(jù)參數(shù)
questionsLists: 傳遞數(shù)據(jù)源
子組件
porps 接收父組件方式有倆中,一種是通過對象形式,一種是通過數(shù)組形式,通過數(shù)組形式接收多個數(shù)據(jù)時用逗號隔開即可。比如:props:['a','b']。
需要注意的是在子組件中 接收父組件的數(shù)據(jù)參數(shù),必須和父組件傳遞時的 參數(shù)一致,上圖中的 questionList
這種情況下會出現(xiàn)這么一個情況,刷新頁面之后子組件接收的父組件數(shù)據(jù)會丟失,我們可以在watch里面去監(jiān)聽一下數(shù)據(jù)的變化。
重新對數(shù)據(jù)進行想要的處理,之后就會發(fā)現(xiàn) 怎么刷新都沒有問題了,數(shù)據(jù)都不會丟失。
-------------------------------分割線----------------------------------------
在這個過程中發(fā)現(xiàn),在子組件的實例中 是有數(shù)據(jù)的,但是重新賦值給一個新對象,新對象的值永遠是為空的。這個還沒有清楚是怎么回事。有了解的 可以告知一下呀😋
總結(jié)
以上所述是小編給大家介紹的解決Vue中 父子傳值 數(shù)據(jù)丟失問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關文章
Vue elementUI 自定義表單模板組件功能實現(xiàn)
在項目開發(fā)中,我們會遇到這種需求,在管理后臺添加自定義表單,在指定的頁面使用定義好的表單,這篇文章主要介紹了Vue elementUI 自定義表單模板組件,需要的朋友可以參考下2022-12-12理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07SpringBoot+Vue前后端分離,使用SpringSecurity完美處理權限問題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離,使用SpringSecurity完美處理權限問題,需要的朋友可以參考下2018-01-01vue項目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項目如何引入element?ui、iview和echarts,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實例形式較為詳細的分析了vue.js前后端數(shù)據(jù)交互相關的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關操作技巧與注意事項,需要的朋友可以參考下2018-04-04element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關于element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03