关于Vue中$on和$emit的说明
最近在看Vue2.x的文档,发现对于$on和$emit的说明不是很清楚,不是很理解,后请教大神后才明白,特在此记录并加上自己的理解。
Vue2.x中对于$on和$emit的解释是:
$on(eventName):监听事件;
$emit(eventName,optionalPayload
) 触发事件;
可能理解过后觉得说得挺对,但是对于像我这般初学者就不是很理解,话不多说,举个栗子来说明这二者的用法,还是以文档的例子来做说明
<div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div>
Vue.component('button-counter', { template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } })
首先用v-on而不是用$on是因为父组件监控子组件事件时是使用v-on而不是$on,v-on:increment是父组件监控子组件的increment事件,子组件里有个点击事件incrementCounter,该点击事件函数中有个this.$emit('increment'),这个是触发increment事件,当子组件里的click事件被触发,执行事件函数incrementCounter,那么子组件里的increment事件就会被触发,此时父组件的increment事件就被触发了,就会执行incrementTotal事件函数。区分清楚事件和事件函数就会很好理解,这里的increment就像是一个抽象的click一样,是一个事件,click是默认鼠标点击后会触发点击事件的事件函数,increment就是我们自己定义的一个事件,通过$emit来触发,$emit(eventName,optionalPayload)的第二个参数是传递给监控事件的事件函数的参数。
再看下一个栗子:
<div id="message-event-example" class="demo"> <p v-for="msg in messages">{{ msg }}</p> <button-message v-on:message="handleMessage"></button-message> </div>
Vue.component('button-message', { template: `<div> <input type="text" v-model="message" /> <button v-on:click="handleSendMessage">Send</button> </div>`, data: function () { return { message: 'test message' } }, methods: { handleSendMessage: function () { this.$emit('message', { message: this.message }) } } }) new Vue({ el: '#message-event-example', data: { messages: [] }, methods: { handleMessage: function (payload) { this.messages.push(payload.message) } } })
这个栗子主要用于说明$emit(eventName,optionalPayload)的第二个参数的用法,如上面所说,optionalPayload是传递给监控这个事件的事件函数的参数,即message函数被触发后,{message:this.message}这个对象会被传递到v-on监控的message事件的事件函数handleMessage的参数中,那么this.message就会被传递给handleMessage中的payload参数。
查阅了很多关于$on和$emit的用法,都不很详细,在此记录一下个人的理解,一来加深下自己理解,二可以帮到他人也是很高兴的一件事,如有不正确的地方,望指出。