自定义事件
使用 v-on 绑定自定义事件
上例非常好,不过看着父组件的代码, "child-msg" 事件来自哪里不直观。如果我们在模板中子组件用到的地方声明事件处理器会更好。为了做到这点,子组件可以用 v-on 监听自定义事件:
<child v-on:child-msg="handleIt"></child>
这让事情非常清晰:当子组件触发了 "child-msg" 事件,父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中;子组件只关注触发事件。
这一块看得不是很明白,能给个例子吗。。。
这里只是改变了父组件监听子组件事件的方式而已。写在父组件中events不能显示知道是哪个子组件来的事件,而直接写在模板中<child v-on:child-msg='handleIt'></child>则能清楚的知道handleIt就是处理这个child来的child-msg事件的(假如有多个子组件都会发送child-msg消息,并且父组件对其做不同处理时,这种情况就有表达优势了)
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<!-- <child></child> 这里不需要了 -->
<child v-on:child-msg="handleIt"></child>
</div>
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 新添加handleIt方法
methods: {
handleIt: function(msg) {
this.messages.push(msg);
}
}
/* 这里也不需要了
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
}
*/
})
按照我的理解:当你触发子组件的child-msg方法时会同时触父组件的handleIt方法
这里的handleIt你可以理解为一个函数名,也就是你自定义的函数名。这个函数写在methods里面。