开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

父组件向子组件传值可以通过Props，那么子组件如何向父组件传值呢？答案是通过事件

Events

Events代表事件，其实事件就是计算机中模拟人类生活的实现，比如我今天要上班，那么上班就是一个事件。到了公司，坐到工位上就表示上班事件触发了，于是我们开始执行一个回调函数：摸鱼。

在原生js中，我们基本上有2种事件监听的方式

window.onload = function(){}
window.addEventListener('load', function(){})

我估计vue中使用的是第一种，因为对于一个组件来说，我们其实并不需要同时响应多个事件，我们应该一一对应。

在vue中绑定事件的方法是v-on,简写为@

<button @a="handleClick">click me</button>

而在子组件中同样要声明这个事件

const emits = defineEmits(['a'])

vue中的事件和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信,这样的设计理念自然也是为了一一对应。

多层嵌套组件的通信

那么，如果我们需要多层嵌套的通信怎么办呢，我这里说一下我的方法。

• 方法一：vuex or pinia 作为一个合格的vuer，第一个反应就是vue的官方库，vuex 或者pinia。当然，这个三方库可以完美解决这个问题，并且还能维护一个公共状态，你唯一需要考虑的是，你的应用规模需不需要这个库

• 方法2：自定义事件 在原生js中，有customEvent这个类，可以用来触发一个自定义事件，在你选定的作用域中传播这个事件,他的代码也很简单，就是一个事件名称，如果你需要传一些数据，可以把它放到detail这个属性下

const evt= new CustomEvent('eventName',{detail:data})
window.dispatchEvent(evt)

于是你可以在相应的作用域中去监听这个事件

window.addEventListener('eventName', function(){})

这个作用域就是你触发事件的位置，比如在我上面的代码，它的作用域是window,那么如果你在document.body下触发事件，那么你就应当监听document.body.addEventListener('eventName', function(){}).

事件校验

很多人都不知道，包括我，其实事件也可以校验。但这里其实校验的是事件的参数，这样其实就可有可无，我们完全可以事件处理函数中去判断，我觉得这也是第一步要做的

const handler = (a)=>{
    if(!a){
     // 如果不存在a,则进行什么操作
     return
    }
}

因此，这个事件校验很少用了