<input v-model="something">
v-model指令其实是下面的语法糖包装而成：
<input :value="something" @:input="something = $event.target.value">
在一个组件上使用 v-model 时，会简化为：
<custom-input :value="something" @input="value => { something = value }"> </custom-input> v-model
valueinput
利用 $emit 触发 input 事件：
this.$emit('input', value); 组件1：
Vue.component('my-component', { template: `<div> <input type="text" :value="currentValue" @input="handleInput"/> </div>`, computed:{ currentValue:function () { return this.value } }, props: ['value'], //接收一个 value prop methods: { handleInput(event) { var value = event.target.value; this.$emit('input', value); //触发 input 事件，并传入新值 } } }); 上面是将prop属性绑定到data里，以便修改 prop 数据(Vue不允许直接修改prop属性的值)#查看原理#
组件2：
Vue.component("my-counter", { template: `<div> <h1>{{value}}</h1> <button @click="plus">+</button> <button @click="minu">-</button> </div>`, props: { value: Number //接收一个 value prop }, data: function() { return { val: this.value } }, methods: { plus() { this.val = this.val + 1 this.$emit('input', this.val) //触发 input 事件，并传入新值 }, minu() { if(this.val>0){ this.val = this.val-1 this.$emit('input', this.val) //触发 input 事件，并传入新值 } } } });