父组件既可以绑定自定义事件也可以绑定原生事件,只需要在事件名后加.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:{
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属性,肯定也会发生变化。因此就是双向的。