javascript - Vue kawalan tersuai model v mengikat dua hala

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

Acara oninput ialah peristiwa yang disokong oleh kebanyakan pelayar kecuali IE Ia dicetuskan apabila nilai berubah, dalam masa nyata, iaitu, ia akan dicetuskan setiap kali aksara ditambah atau dipadamkan melalui js, ia tidak akan dicetuskan

Jadi input dicetuskan apabila kandungan dalam input berubah Adapun this.$emit('input', Number(formattedValue)),事实上这里是发送自定义事件'input',他是用于父子组件之间的通信的，也就是说这里emit的事件并不会被组件自己捕捉，也就是不会触发这里的updateValue，你在的<currency-input v-model="price"></currency-input>这里增加一下input的监听，emit di sini, ia dicetuskan di sini, jadi panggilan gelung yang anda nyatakan tidak akan dihantar.