在Vue中使用EventBus，你应该知道这些细节！

你们或许都据说EventBus,或者说或多或少都了解过，他能够在任何两个组件中进行传值，不局限于父子、祖孙或是兄弟组件，也能够说他是一种发布——订阅的设计模式。

但您是否真正的会熟练的使用他吗？

本文将把一个例子拆分步骤，让读者能真的明白EventBus到底如何使用！

我将使用拆分为五个步骤：建立、引入、监听、递交、销毁

1.建立

Vue中自带EventBus，不须要额外任何使用插件

只须要new一个「vue实例」

像这样~

// 建立一个EventBus.js文件

import Vue from 'vue' // 引入vue

const EventBus = new Vue() // 建立实例

export default EventBus // 导出
复制代码

2.引入

引入的方式有两种

① 使用import引入

这个方法特别须要注意的是应该引入 同一个实例

import EventBus from '../EventBus'
复制代码

② 使用Vue原型链引入

若是您和我同样用的是 vue-cli 脚手架

能够直接在Vue的原型链上添加全局方法

// 在 src 的 main.js 中，加上如下代码 

// 引入第一步建立好的 EventBus
import EventBus from './EventBus'

// 这个方式能够在任何组件里直接用 this.$EventBus 调用
Vue.prototype.$EventBus = EventBus

// 也能够直接这样使用，不须要第一步的建立
// import Vue from 'vue'
// Vue.prototype.$EventBus = new Vue()
复制代码

注意: 两种方法任选其一，本是采用第二种方法

3.监听

要使用监听方法，只要调用EventBus下的$on方法

具体使用以下:

建立 ./a.vue

<template>
  <div>
    <h3>页面A</h3>
    <router-link to="/b">
      跳转B页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----A页面监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$on('getNum', (num) => {
      console.log('num', num)
    })
  }
}
</script>

复制代码

4.递交

而接下就是使用递交方法，

一样的，只要调用EventBus下的$emit方法

具体使用以下:

建立 ./b.vue

<template>
  <div>
    <h3>B页面</h3>
    <router-link to="/a">
      跳转A页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----B页面递交事件----')
    const num = 2
    // 使用Vue原型链引入
    this.$EventBus.$emit('getNum', num)
  }
}
</script>
复制代码

读者必定要特别注意！！！

像这样设置路由！

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import a from '../views/a'
import b from '../views/b'

Vue.use(VueRouter)

const routes = [
  {
    path: '/a',
    name: 'a',
    component: a
  },
  {
    path: '/b',
    name: 'b',
    component: b
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

复制代码

而以后点两个路由跳转

就有如下的效果

5.销毁

细心的读者会发现: 上面输出 num 2 会每次递增 1 次 输出

这是由于没有对监听事件销毁，从致使了内存泄露

应该在调用 方法（）页面的生命周期中添加off

 // a.vue 添加$off方法，防止内存泄露
 beforeDestroy () {
    console.log('----A页面销毁监听事件----')
    this.$EventBus.$off('getNum')
  }
复制代码

这样就是完美的使用方式了

读者应该还要注意的是！！！ 事件顺序：绑定监听事件->递交事件->获取值->销毁监听事件

本文的完整代码以下：

<template>
  <div>
    <h3>页面A</h3>
    <router-link to="/b">
      跳转B页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----A页面监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$on('getNum', (num) => {
      console.log('num', num)
    })
  },
  beforeDestroy () {
    console.log('----A页面销毁监听事件----')
    // 使用Vue原型链引入
    this.$EventBus.$off('getNum')
  }
}
</script>
复制代码

<template>
  <div>
    <h3>B页面</h3>
    <router-link to="/a">
      跳转A页面
    </router-link>
  </div>
</template>

<script>
export default {
  created () {
    console.log('----B页面递交事件----')
    const num = 2
    // 使用Vue原型链引入
    this.$EventBus.$emit('getNum', num)
  }
}
</script>
复制代码

总结一下事件流程就是

建立eventBus->引入同一个实例->绑定(订阅)监听事件->递交（发布）事件->销毁监听事件

感谢阅读