快捷導(dǎo)航

Vue組件更新數(shù)據(jù)v-model不生效的解決

更新時(shí)間：2022年04月01日 16:43:35 作者：語霖BABA

這篇文章主要介紹了Vue組件更新數(shù)據(jù)v-model不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

組件更新數(shù)據(jù)v-model不生效

問題描述

在使用Vue雙向綁定(v-model)功能時(shí)，封裝子組件通過Inject功能使用了父組件中的 model 中的屬性進(jìn)行雙向綁定，此時(shí)在程序中去更新model的某個(gè)屬性的值，發(fā)現(xiàn)子組件沒有實(shí)時(shí)渲染。

原因分析

由于 JavaScript 的限制，Vue 不能檢測數(shù)組和對(duì)象的變化。盡管如此我們還是有一些辦法來回避這些限制并保證它們的響應(yīng)性。

詳見：檢測變化注意事項(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ù)的檢測，第三種方式使用的Vue的特性，對(duì)跟節(jié)點(diǎn)下的數(shù)據(jù)變更的自動(dòng)檢測。

v-model失效的問題

在父子組件中，例如iview的table組件中的slot，該函數(shù)相對(duì)比于table所在附件為父子組件，父子組件的v-model不會(huì)是雙向綁定，只是單向傳值，這是vue的機(jī)制問題，原因是不想讓子組件污染父組件的數(shù)據(jù)環(huán)境，所以使用的單向傳輸，經(jīng)過測試，使用on-change，on-blur等，均存在不同的問題，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ì)生效。