Vue組件更新數(shù)據(jù)v-model不生效的解決
組件更新數(shù)據(jù)v-model不生效
問(wèn)題描述
在使用Vue雙向綁定(v-model)功能時(shí),封裝子組件通過(guò)Inject功能使用了父組件中的 model 中的屬性進(jìn)行雙向綁定,此時(shí)在程序中去更新model的某個(gè)屬性的值,發(fā)現(xiàn)子組件沒(méi)有實(shí)時(shí)渲染。
原因分析
由于 JavaScript 的限制,Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。盡管如此我們還是有一些辦法來(lái)回避這些限制并保證它們的響應(yīng)性。
詳見(jiàn):檢測(cè)變化注意事項(xiàng)
## 解決方案 對(duì)于這種對(duì)象變化,我們有三種方法去解決:
方法一
使用Vue.set(object,key,value)
Vue.set(vm.obj,"sex","man")
方法二
使用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
方法三
使用**Object.assign({},this.obj)**重新賦值
this.obj.sex = "man"; this.obj = Object.assign({},this.obj)
總結(jié):前兩種方式都是應(yīng)用了Vue內(nèi)置的set方法去觸發(fā)對(duì)象數(shù)據(jù)的檢測(cè),第三種方式使用的Vue的特性,對(duì)跟節(jié)點(diǎn)下的數(shù)據(jù)變更的自動(dòng)檢測(cè)。
v-model失效的問(wèn)題
在父子組件中,例如iview的table組件中的slot,該函數(shù)相對(duì)比于table所在附件為父子組件,父子組件的v-model不會(huì)是雙向綁定,只是單向傳值,這是vue的機(jī)制問(wèn)題,原因是不想讓子組件污染父組件的數(shù)據(jù)環(huán)境,所以使用的單向傳輸,經(jīng)過(guò)測(cè)試,使用on-change,on-blur等,均存在不同的問(wèn)題,input如果使用on-change,修改數(shù)據(jù)源會(huì)導(dǎo)致輸一個(gè)字符,然后更新到v-model綁定的數(shù)據(jù)源上,然后由于數(shù)據(jù)源的更新,就會(huì)導(dǎo)致該組件的再次渲染,input將會(huì)失去焦點(diǎn),使用v-blur則會(huì)導(dǎo)致點(diǎn)擊其他按鈕時(shí),第一次點(diǎn)擊,失去input的焦點(diǎn),執(zhí)行綁定的方法,第二次點(diǎn)擊才會(huì)生效。
解決辦法
特別的土,聲明一個(gè)新的數(shù)據(jù)源,然后使用on-change改變新的數(shù)據(jù)源,然后再特定的情況下,比如提交等時(shí)機(jī),將新的數(shù)據(jù)源賦給老的數(shù)據(jù)源,這樣就不會(huì)引起問(wèn)題。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js的復(fù)用組件開(kāi)發(fā)流程完整記錄
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開(kāi)發(fā)流程的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的示例詳解
這篇文章主要給大家介紹了vue實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)和重發(fā)短信功能的相關(guān)知識(shí),文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12vue如何實(shí)現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)observer和watcher源碼的相關(guān)資料,分析vue的observe實(shí)現(xiàn)源碼,聊聊如何一步一步實(shí)現(xiàn)$watch,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
Vue.js?是一個(gè)流行且強(qiáng)大的?JavaScript?框架,它允許我們構(gòu)建動(dòng)態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問(wèn)題的有效策略,希望對(duì)大家有所幫助2023-09-09在Vue中使用Echarts實(shí)例圖的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析
這篇文章主要介紹了vue新建項(xiàng)目并配置標(biāo)準(zhǔn)路由過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12