vue事件执行顺序

之前一直有个问题vue中emit的执行顺序是什么?

1
2
3
4
5
6
7
8
9
// 父文件
<template
@receive="receive"
>
</template>

receive() {
cosnole.log('接收到事件')
}
1
2
3
4
5
6
7
8
9
10
// 子组件
<button
@click="send"
>
</button>

send() {
this.$emit('receive')
cosnole.log('发送事件')
}
1
2
3
// 控制台
'接收到事件'
'发送事件'

原本以为结果是先打印‘发送事件’然后打印‘接收到事件’,结果却是相反,暂时还没想通这是为什么。在我认为应该是先执行send中的同步任务,然后事件的触发应该作为类似于回调在同步任务完成后执行。

关于这个,刚刚写着写着突然想通了,之前看过一个关于简易事件库的实现。简单来说父组件在注册事件时,将对应的方法和事件名做好绑定,在emit时,看起来事件的执行和这个emit时没有直接的联系的,但实际上就是执行了事件中的方法。括号中的参数就是指定的事件名,所以可以理解为emit就是执行了众多一一绑定好的事件中的某一个。所以结果是先执行’接收到事件’后执行’发送事件’。我好蠢啊!终于想通了这个这么简单的问题。