javascript - Vue Custom Control V-Modell Zwei-Wege-Bindung
为情所困
为情所困 2017-07-05 11:01:51
0
1
798
<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循环被调用吗?
为情所困
为情所困

Antworte allen(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触发的是这里的,所以不会发送你说的循环调用的情况。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage