Vue組件更新數據v-model不生效怎么解決

今天小編給大家分享一下Vue組件更新數據v-model不生效怎么解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

組件更新數據v-model不生效

問題描述

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

原因分析

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

詳見：檢測變化注意事項

## 解決方案 對于這種對象變化，我們有三種方法去解決：

方法一

使用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)

總結：前兩種方式都是應用了Vue內置的set方法去觸發對象數據的檢測，第三種方式使用的Vue的特性，對跟節點下的數據變更的自動檢測。
 

關于v-model失效的問題

在父子組件中，例如iview的table組件中的slot，該函數相對比于table所在附件為父子組件，父子組件的v-model不會是雙向綁定，只是單向傳值，這是vue的機制問題，原因是不想讓子組件污染父組件的數據環境，所以使用的單向傳輸，經過測試，使用on-change，on-blur等，均存在不同的問題，input如果使用on-change，修改數據源會導致輸一個字符，然后更新到v-model綁定的數據源上，然后由于數據源的更新，就會導致該組件的再次渲染，input將會失去焦點，使用v-blur則會導致點擊其他按鈕時，第一次點擊，失去input的焦點，執行綁定的方法，第二次點擊才會生效。

解決辦法

特別的土，聲明一個新的數據源，然后使用on-change改變新的數據源，然后再特定的情況下，比如提交等時機，將新的數據源賦給老的數據源，這樣就不會引起問題。

以上就是“Vue組件更新數據v-model不生效怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。