乘风原创程序

  • Vue组件更新数据v-model不生效的解决
  • 2022/4/1 14:12:25
  • 组件更新数据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改变新的数据源,然后再特定的情况下,比如提交等时机,将新的数据源赋给老的数据源,这样就不会引起问题。

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。