Vue 自定义控件v-model双向绑定

Question

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {

  template: '\

    <span>\

      $\

      <input\

        ref="input"\

        v-bind:value="value"\

        v-on:input="updateValue($event.target.value)"\

      >\

    </span>\

  ',

  props: ['value'],

  methods: {

    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制

    updateValue: function (value) {

      var formattedValue = value

        // 删除两侧的空格符

        .trim()

        // 保留 2 小数位

        .slice(0, value.indexOf('.') + 3)

      // 如果值不统一，手动覆盖以保持一致

      if (formattedValue !== value) {

        this.$refs.input.value = formattedValue

      }

      // 通过 input 事件发出数值

      this.$emit('input', Number(formattedValue))

    }

  }

})

vue入门指导里的，请问input事件是什么时候触发的，一旦触发，`this.$emit('input', Number(formattedValue))`不会导致input事件不停被触发，updateValue循环被调用吗？

Answer 1

oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；所以input是在input里的内容发生变化时触发的，至于这里的this.$emit('input', Number(formattedValue)),事实上这里是发送自定义事件'input',他是用于父子组件之间的通信的，也就是说这里emit的事件并不会被组件自己捕捉，也就是不会触发这里的updateValue，你在的<currency-input v-model="price"></currency-input>这里增加一下input的监听，emit触发的是这里的，所以不会发送你说的循环调用的情况。