javascript - Vue 自定义控件v-model双向绑定
本文介绍了javascript - Vue 自定义控件v-model双向绑定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<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循环被调用吗?
解决方案
oninput事件是IE之外的大多数浏览器支持的事件,在value改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发;
所以input是在input里的内容发生变化时触发的,至于这里的this.$emit('input', Number(formattedValue))
,事实上这里是发送自定义事件'input',他是用于父子组件之间的通信的,也就是说这里emit
的事件并不会被组件自己捕捉,也就是不会触发这里的updateValue
,你在的<currency-input v-model="price"></currency-input>
这里增加一下input
的监听,emit
触发的是这里的,所以不会发送你说的循环调用的情况。
这篇关于javascript - Vue 自定义控件v-model双向绑定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文