前言
之所以会记录这篇笔记,是因为 Vue 中的自定义事件涉及到了组件间的沟通,因此无论是在实际开发中,还是面试中,都是非常常见且重要的东西。因此特地记录这篇笔记用以加深印象以及后续翻阅巩固。
本质
首先要明确的一个关键点是自定义事件本质是 在实例上挂一个“事件”,并为其绑定对应的回调。然后以编程式的方式在需要的时候去触发这个实例上的该“事件”。
关于自定义事件的使用场景
- 父子组件通信 (最常见)。
- 兄弟组件通信。
父子组件通信
子组件代码
父组件代码
兄弟组件通信
当明白 Vue 中自定义事件的本质后,想要实现兄弟节点间的通信,其实也就没有想象中的那么复杂了,可以花式的去实现。但本质上依然是, 触发对应实例上的自定义事件。
花式通信一
步骤:
- 为兄弟节点设置要监听的自定义事件,并指定其回调函数。
- 找个地方触发它。
花式通信二
步骤:
- 以代理的方式声明一个新的 Vue 实例,并为其声明要监听的自定义事件。务必需要注意的是,一定要及时的销毁自定义事件的监听器。
- 找个地方触发它。
花式通信三(与第二种方式相似)
步骤:
- 在兄弟节点中使用父组件声明监听一个自定义事件。
- 找个地方触发它。
最后
这篇笔记的初衷是为了加深和巩固自定义事件的学习,因此如果有不合理或错误的地方,请指出。在此致敬,并表示由衷的感谢。?