Vue组件更新数据v-model不生效怎么解决

魁首哥

作者

Vue组件更新数据v-model不生效怎么解决

今天小编给大家分享一下Vue组件更新数据v-model不生效怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

组件更新数据v-model不生效

问题描述

在使用Vue双向绑定(v-model)功能时，封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定，此时在程序中去更新model的某个属性的值，发现子组件没有实时渲染。

Vue组件更新数据v-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的焦点，执行绑定的方法，第二次点击才会生效。