乐趣区

关于前端:vmodel双向绑定失效问题

jiezi

问题形容

InputNumber组件 v -model 绑定的值在输入框中手动删除，在 on-change 事件中判断拿到的值，如果为 null，赋值为 1，然而该值产生了变动，InputNumber 却并没有显示绑定的值（或者说有时候显示，有时候又不显示）

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-change="getNum"
    ></InputNumber>
getNum (num) {if (typeof num === 'number') {this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {this.$Message.info('这里有默认值哦~ 能够自行批改哦 o(*~▽~*)ブ')
        this.judgeNum = 1 // 扭转不失效
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    },

问题剖析

能够发现 on-change 事件是在值产生扭转的时候就触发的，而不是在输入框失焦之后触发，那咱们能够想到在删除的那一刻触发了 on-change 事件，值变为 null，这个时候又赋值为 1，在极短时间内去间断的进行赋值操作，就可能导致出错，因为这个值在组件外面可能进行了一系列的动作，一个还没完结，又来了一个。所以最好是不要在一个值的扭转事件外面再去扭转它。

问题解决

setTimeout(() => {this.judgeNum = 1}, 5000)

解决 1 ：能够弄一个定时器，提早第二次扭转，0.5s 是比拟适合的。但其实也可能会受到浏览器响应速度的影响，所以有了解决 2 

<InputNumber
      v-if="judge !== 7"
      v-model="judgeNum"
      :value="judgeNum"
      :min="0"
      @on-blur="getNum"
></InputNumber>
// 留神这里的 on-blur 没有默认带参，所以通过 this.judgeNum 去拿到用户输出的值

解决 2 ：不监听 on-change 事件，改成监听 on-blur 失焦事件，上一个问题的确解决了，然而会有新的问题，就是按高低键去扭转值大小的时候没有监听到值得变动，因为没有触发失焦事件，这里也能够应用 watch 去监听，然而有更好的解决 3 

<!-- 父组件：-->
<cCompare :init_judge="init_judge" v-model="init_judgeNum" @getData="getJudge" />
<!-- 通过 v -model 去给子组件传值 -->
// 子组件：props: {
    value: { // 留神 value 不写默认的返回 default，然而类型 type 还是要写
      type: Number
    }
},
computed: {
    judgeNum: {get () {return this.value},
      set (val) { // 只有该值被扭转, 就会触发 set 事件
        this.$emit('input', val) // 默认 input 事件
        this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
},
methods: {getNum () { // 这外面就不须再去抛新值了，都在 set 外面抛了
      if (typeof this.judgeNum === 'number') {// this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      } else {this.$Message.info('这里有默认值哦~ 能够自行批改哦 o(*~▽~*)ブ')
        this.judgeNum = 1
        // this.$emit('getData', this.judgelabel, this.judge, this.judgeNum, null)
      }
    }
}

解决 3 ：对于这种须要父组件扭转子组件 v -model 值，又须要子组件值扭转后同步到父组件，能够间接应用父子组件的双向绑定，在父组件通过 v -model 绑定该值，在子组件中用 value 接管，再用计算属性监听他的扭转，扭转之后再通过 input 事件传出（value 和 input 是默认的组件 v -model 实现的语法糖），这样就实现了父子组件的数据双向绑定（强相干），因为本来父组件通过 prop 传入的值在子组件是不容许被扭转的。

退出移动版