1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之非父子组件传值

Vue教程之非父子组件传值

前面给大家介绍父子组件之间的传值,那么咱们今天介绍一下非父子组件的传值。

在 Vue 中可以使用 Vuex 来进行全局变量的声名,但是有的时候我们可能不想使用这种方式,下面给大家介绍一种叫做事件总线的方式,来解决非父子组件的传值问题。

事件总线(EventBus) 介绍

EventBus 又称为事件总线。在 Vue 中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的 Vuex 作为状态管理中心,将通知的概念上升到共享状态层次。

演示

初始化

初始化的方式有两种,第一种是局部初始化,仅在引入的组件内生效,第二种是全局初始化,在整个 Vue 项目周期生效。

先说下第一种,创建一个 event-bus.js(可自定义修改) 的文件,内容如下:

第二种是在 main.js 中初始化 EventBus。

这种初始化的方式,是一种全局初始化的方式。

事件总线已经创建好了,那么我们现通过对应的方法来进行组件之间的通信。

实例

我们使用一个父组件,两个子组件的方式来进行演示。

event-bus.js

父组件

子组件 1,发送方

子组件 2,接收方

移除事件监听者

使用 $off,可以移除事件监听,如下:

EventBus.$off('receive') 来移除应用内所有对此某个事件的监听。如果想要移除所有的事件监听,可以使用 EventBus.$off() 来实现,不需要添加任何参数 。

标签
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

邮箱地址不会被公开。 必填项已用*标注