<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 的组件，它应该如下：
- 接收一个
valueprop - 触发
input事件，并传入新值
利用 $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 事件，并传入新值
}
}
}
});