使用自定义事件的表单输入组件

自定义事件可以用来创建自定义的表单输入组件，使用v-model来进行双向数据绑定。看看这个：

<input v-model="something">

这不过是一下示例的语法糖：

<input v-bind:value="something" v-on:input="something=$event.target.value">

 

所以在组件中使用时，它相当于下面的简写：

<custon-input v-bind:value="something" v-on:input="something=arguments[0]"></custom-input>

所以要让组件的v-model生效，它应该：

1 接受一个value属性

2 在有新的值时触发input事件

我们来看一个非常简单的货币输入的自定义控件：

<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('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input', Number(formattedValue))
}
}
})