在自定义组件上使用v-model指定：
Vue.component('my-button',{
template:'<button @click="handleClick"></button>',
data:{
return {
counter:0
}
},
methods:{
handleClick:function(){
this.counter++:
this.$emit('input',this.counter);
}
}
});
new Vue({
el:'#app',
data:{
total:0
}
});
<div id="app"> <p>一共是{{totle}}</p> <my-button v-model="total"></my-button> </div>
使用自定义事件的表单输入组件
自定义事件也可以用来创建自定义的表单输入组件，使用v-model实现双向数据绑定
<input v-model="msg"/> 只是
<input :value="msg" @input="msg=$event.target.msg"/>的一个语法糖
所以要让组件的 v-model 生效，它必须：
1 接受一个value属性
2 value值改变时，触发input事件