vue自定义组件使用v-model,vue组件不刷新

　　本文主要介绍Vue组件更新数据v-model不生效的解决方案。有很好的参考价值，希望对你有帮助。如有错误或不足之处，请不吝赐教。

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

问题描述

　　当使用Vue双向绑定(v-model)函数时，封装的子组件使用父组件中模型的属性，通过注入函数进行双向绑定。此时，在程序中更新模型的一个属性的值，发现子组件没有被实时渲染。

原因分析

　　由于JavaScript的限制，Vue无法检测数组和对象的变化。然而，有一些方法可以避免这些限制并确保它们的响应性。

　　有关详细信息，请参阅：检测更改的注意事项。

　　## 解决方案对于这种对象变化，我们有三种方法去解决：

方法一

　　使用Vue.set(对象，键，值)

　　Vue.set(vm.obj， sex ， man )

方法二

　　用这个。$ set (this.object，key，value)

　　这个。$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的表组件中的插槽，与表的附件相比，此功能是父子组件。父子组件的v-model不是双向绑定，只是单向的值传递。这就是vue的机制问题，因为子组件不想污染父组件的数据环境，所以采用单向传输。经过测试，它使用了on-change、on-blur等。有不同的问题。如果input使用on-change，修改数据源将导致输入一个字符，然后将其更新到v-model绑定的数据源。然后，由于数据源的更新，组件将被再次呈现，输入将失去焦点。当使用v-blur点击其他按钮时，第一次点击将失去输入焦点，并执行绑定方法，第二次点击将生效。

解决办法

　　特殊土，声明一个新的数据源，然后用on-change改变新的数据源，然后在特定情况下，比如提交，把新的数据源赋给旧的数据源，这样就不会出问题了。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。