自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。
所以要让组件的 v-model 生效，它必须：
- 接受一个 value 属性
- 在有新的 value 时触发 input 事件
代码如下：
HTML：
<div id="app"> <p>{
{
message }
}
</p> <currency-input label="Price" v-model="price"></currency-input> <currency-input label="Shipping" v-model="shipping"></currency-input> <currency-input label="Handling" v-model="handling"></currency-input> <currency-input label="Discount" v-model="discount"></currency-input> <p>Total: ${
{
total }
}
</p></div>
Javascript：
Vue.component('currency-input', {
template: ` <div> <label v-if="label">{
{
label }
}
</label> $ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" v-on:focus="selectAll" v-on:blur="formatValue" > </div> `, props: {
value: {
type: Number, default: 0 }
, label: {
type: String, default: '' }
}
, mounted: function () {
this.formatValue() }
, methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value, this.value) if (result.warning) {
this.$refs.input.value = result.value }
this.$emit('input', result.value) }
, formatValue: function () {
this.$refs.input.value = currencyValidator.format(this.value) }
, selectAll: function (event) {
setTimeout(function () {
event.target.select() }
, 0) }
}
}
)new Vue({
el: '#app', data: {
message: 'Hello Vue.js!', price: 0, shipping: 0, handling: 0, discount: 0 }
, computed: {
total: function () {
return (( this.price * 100 + this.shipping * 100 + this.handling * 100 - this.discount * 10 ) / 100).toFixed(2) }
}
}
)
效果图如下：
每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
v-model实现双向传递。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
