自定義事件也可以用來創建自定義的表單輸入組件，使用 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實現雙向傳遞。新聞熱點
疑難解答
