Vue組件更新數據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的特性，對跟節點下的數據變動的自動檢測。

本文分享自微信公衆號 - Java碼農（jarcoder）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。