Vue实践--v-model在组件中的应用

父组件既可以绑定自定义事件也可以绑定原生事件，只需要在事件名后加.native修饰符即可，例如

HTML部分:

<!-- 父组件上绑定原生事件需要在事件名后加.native修饰符 -->
<my-component @click.native="alertMsg"></my-component>

JS部分：

var myApp = new Vue({
el:"#container",
data:{
sum:1,
initNum:3
},
methods:{
// 这里的t就是从this.$emit("getall",this.total)上面传下来的this.total
getSum:function(t){
this.sum+=t
},
alertMsg:function(){
alert("我是组件上原生事件触发的")
}
}
})

当点击组件的时候会弹出“我是组件上原生事件触发的”的提示框；

V-model在父子组件中的应用

HTML部分：

<my-component1 v-model="initNum"></my-component1>
<p>当前initNum的值为：{{initNum}}</p>

JS部分：

Vue.component("my-component1",{
template:"<button @click='getAll' type='button'>add</button>",
data:function(){
return {
totals:2
}
},
methods:{
getAll:function(){
this.totals=this.totals+1;
this.$emit("input",this.totals*6)
}
}
})
var myApp = new Vue({
el:"#container",
data:{

ac48
sum:1,
initNum:3
},
methods:{
// 这里的t就是从this.$emit("getall",this.total)上面传下来的this.total
getSum:function(t){
this.sum+=t
},
alertMsg:function(){
alert("我是组件上原生事件触发的")
}
}
})

以上，当点击子组件的时候会直接触发父组件上的input事件（虽然没有直接写，而是用v-model代替的，但是不要忘了，v-model的效果可以通过input事件模拟实现），把this.totals*6传递给了initNum（在这里，v-model绑定的值永远等于传递过来的参数的值），从而改变了initNum的值。

其实从某种程度上说，v-model就是组件自定义事件中的一个特殊情况，只不过在这里的自定义事件变成了input而已，能做的事情还比较少吧（从目前来看，个人见解）；

实现一个具有双向绑定的v-model组件要满足两个要求：

1.接收一个value属性（父亲中的属性传递给子组件（v-bind:value），父组件v-model绑定一个值），

2.在有新的value的时候触发input事件，这里包含两层意思，其一给子组件绑定input事件（你懂的），当该事件触发的时候，把子组件中的input框的值传递给父组件($emit("input",event.target.value))，此时父组件中v-model绑定的值会发生改变（子组件影响父组件中的值）,因为v-model是双向绑定的，所以Vue实例中的对应数据也会发生变化，然后你懂的.....。

通过父组件影响子组件的值：这就需要通过事件来完成（毕竟父组件不是一个表单元素，不能直接v-model），绑定的数据的变化，因为父子组件的数据通信是单向的（props），把父组件通过props传递过来的属性给绑定到子组件的value属性，肯定也会发生变化。因此就是双向的。