大家或许都听说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->引入同一个实例->绑定(订阅)监听事件->递交（发布）事件->销毁监听事件
感谢阅读
