javascript - Vue 自定義控件v-model雙向綁定
問題描述
<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循環被調用嗎?
問題解答
回答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觸發的是這里的,所以不會發送你說的循環調用的情況。
相關文章:
1. Python從URL中提取域名2. 實現bing搜索工具urlAPI提交3. node.js - windows10下的npm全局路徑的復原或者將npm徹底刪除?4. python執行cmd命令,怎么讓他執行類似Ctrl+C效果將其結束命令?5. python - scrapy url去重6. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)7. mysql在限制條件下篩選某列數據相同的值8. 關于mysql聯合查詢一對多的顯示結果問題9. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。10. python - Django有哪些成功項目?
