Vue教程之非父子组件传值

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

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

事件总线（EventBus） 介绍

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

演示

初始化

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

先说下第一种，创建一个 event-bus.js（可自定义修改） 的文件，内容如下：

// event-bus.js
import Vue from 'vue'
export default new Vue()

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

Vue.prototype.$EventBus = new Vue()

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

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

实例

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

event-bus.js

import Vue from 'vue'
export default new Vue()

父组件

<template>
  <div>
    <Demo81></Demo81>
    <Demo82></Demo82>
  </div>
</template>

<script>
import Demo81 from './components/Demo8-1'
import Demo82 from './components/Demo8-2'
export default {
  components: {
    Demo81,
    Demo82
  }
}
</script>

子组件 1，发送方

<template>
  <div>
    <button @click="send">发送</button>
  </div>
</template>

<script>
// 组件1，发送方
import EventBus from '../event-bus'
export default {
  methods: {
    send () {
      EventBus.$emit('receive', '组件1')
    }
  }
}
</script>

子组件 2，接收方

<template>
  <div>
    {{ content }}
  </div>
</template>

<script>
// 组件2，接收方
import EventBus from '../event-bus'
export default {
  data () {
    return {
      content: '组件2'
    }
  },
  mounted () {
    EventBus.$on('receive', (value) => {
      this.content = value
    })
  }
}
</script>

移除事件监听者

使用 $off，可以移除事件监听，如下：

<template>
  <div>
    {{ content }}
  </div>
</template>

<script>
// 组件2，接收方
import EventBus from '../event-bus'
export default {
  data () {
    return {
      content: '组件2'
    }
  },
  mounted () {
    EventBus.$on('receive', (value) => {
      this.content = value
    })
    EventBus.$off('receive')  // 移除对名为 receive 的事件监听
  }
}
</script>

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