問題描述

<currency-input v-model='price'></currency-input>Vue.component(’currency-input’, { template: ’ <span> $ <inputref='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循環被調用嗎？

問題解答

oninput事件是IE之外的大多數瀏覽器支持的事件，在value改變時觸發，實時的，即每增加或刪除一個字符就會觸發，然而通過js改變value時，卻不會觸發；

所以input是在input里的內容發生變化時觸發的，至于這里的this.$emit(’input’, Number(formattedValue)),事實上這里是發送自定義事件’input’,他是用于父子組件之間的通信的，也就是說這里emit的事件并不會被組件自己捕捉，也就是不會觸發這里的updateValue，你在的<currency-input v-model='price'></currency-input>這里增加一下input的監聽，emit觸發的是這里的，所以不會發送你說的循環調用的情況。