問題描述

<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: { // 不是直接更新值，而是使用此方法來對(duì)輸入值進(jìn)行格式化和位數(shù)限制 updateValue: function (value) { var formattedValue = value// 刪除兩側(cè)的空格符.trim()// 保留 2 小數(shù)位.slice(0, value.indexOf(’.’) + 3) // 如果值不統(tǒng)一，手動(dòng)覆蓋以保持一致 if (formattedValue !== value) {this.$refs.input.value = formattedValue } // 通過 input 事件發(fā)出數(shù)值 this.$emit(’input’, Number(formattedValue)) } }})vue入門指導(dǎo)里的，請(qǐng)問input事件是什么時(shí)候觸發(fā)的，一旦觸發(fā)，`this.$emit(’input’, Number(formattedValue))`不會(huì)導(dǎo)致input事件不停被觸發(fā)，updateValue循環(huán)被調(diào)用嗎？

問題解答

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

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