乐趣区

Vue-中的自定义事件

前言

之所以会记录这篇笔记,是因为 Vue 中的自定义事件涉及到了组件间的沟通,因此无论是在实际开发中,还是面试中,都是非常常见且重要的东西。因此特地记录这篇笔记用以加深印象以及后续翻阅巩固。

本质

首先要明确的一个关键点是自定义事件本质是 在实例上挂一个“事件”,并为其绑定对应的回调。然后以编程式的方式在需要的时候去触发这个实例上的该“事件”

关于自定义事件的使用场景

  • 父子组件通信 (最常见)。
  • 兄弟组件通信。

父子组件通信

子组件代码

父组件代码

兄弟组件通信

当明白 Vue 中自定义事件的本质后,想要实现兄弟节点间的通信,其实也就没有想象中的那么复杂了,可以花式的去实现。但本质上依然是, 触发对应实例上的自定义事件。

花式通信一

步骤:

  1. 为兄弟节点设置要监听的自定义事件,并指定其回调函数。

  1. 找个地方触发它。

花式通信二

步骤:

  1. 以代理的方式声明一个新的 Vue 实例,并为其声明要监听的自定义事件。务必需要注意的是,一定要及时的销毁自定义事件的监听器。

  1. 找个地方触发它。

花式通信三(与第二种方式相似)

步骤:

  1. 在兄弟节点中使用父组件声明监听一个自定义事件。

  1. 找个地方触发它。

最后

这篇笔记的初衷是为了加深和巩固自定义事件的学习,因此如果有不合理或错误的地方,请指出。在此致敬,并表示由衷的感谢。?

退出移动版