vue 自定义组件使用v-model

在自定义组件上使用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事件