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源创计划”，欢迎正在阅读的你也加入，一块儿分享。