前面说了
父组件 >>>> 子组件
子组件 >>>> 父组件
父组件 <<<< 子组件
子组件 <<<< 父组件
相互传值的方式，那两个组件不是父子关系咋办啊？之前面试被问到，问的我一脸懵逼，我当时回答说，localstorage、定义全局变量；
其实这两种方式也不是不可以，但老二存了数据进去，老大怎么获取呢？老大不知道你啥时候存进去了呀！？
面试结束我就想，移动端开发有广播，注册广播，发送广播的机制，记得浏览器也有这种机制，那是不是vue里边也有相应的机制呢？
我一搜，哎呦 ~~我去~~ 真有，（妹的，之前也接触过的，就是通过bus传递，没实际在项目里边用过，所以忘了）。
那这个bus具体咋整涅：
1.定义一个单独的js文件，起名为：vueBus.js，然后里边写：
import Vue from 'vue'; let bus = new Vue(); export default bus;
2.在需要接收信息的地方注册监听事件：先引入bus
mounted(){ let self = this bus.$on('fromSecond',(data)=>{ self.res = data//获取到传过来的值 }); },
3.然后发送广播事件：先引入bus
sendMsg(){ bus.$emit("fromSecond",this.res) }
注意：先引入bus：
import bus from '@/api/vueBus.js'
并且发一次，多个注册过的地方都能接收到
--------------------------------------------------------------------------------------------------------------------------分割线
那实现原理是什么样的呢？当然知道了上边的内容完全够用了，但在这个人人装b的时代，你不了解原理怎么能够呢，原理你要知道并且深深的知道！
想知道原理就得看源码：
export function eventsMixin (Vue: Class<Component>) { const hookRE = /^hook:/ // 这里是注册事件 Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component { const vm: Component = this if (Array.isArray(event)) {// 这里看到注册事件时候可以传个数组进来 for (let i = 0, l = event.length; i < l; i++) {//循环着添加事件 vm.$on(event[i], fn)//调用自己 } } else {// _events是装所有事件的对象 // 添加进_events去 如果对应的这个事件名已经有方法了就再往里边push一个 // 如果没有就建一个数组往里边push // 所以 你往数组里边放几次执行时候就会执行几次， // 同一个事件名 注册几个不同/相同回调方法 都会执行 (vm._events[event] || (vm._events[event] = [])).push(fn) // optimize hook:event cost by using a boolean flag marked at registration // instead of a hash lookup if (hookRE.test(event)) { vm._hasHookEvent = true } } return vm } // 这里是一次性绑定 Vue.prototype.$once = function (event: string, fn: Function): Component { const vm: Component = this // 封装一个fn 执行时候移除绑定 这样就实现只能触发一次了 function on () { vm.$off(event, on) fn.apply(vm, arguments) } on.fn = fn vm.$on(event, on)// 绑定封装过一次的fn return vm } // 移除绑定事件 Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component { const vm: Component = this // all if (!arguments.length) { vm._events = Object.create(null) return vm } // array of events // 是数组的话 循环着去解绑 if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { vm.$off(event[i], fn) } return vm } // specific event const cbs = vm._events[event] if (!cbs) {// 找不到这个事件 你解绑个p呀 return vm } if (!fn) {// 解绑时候没有传过来 回调方法 你解绑个p呀 vm._events[event] = null return vm } // specific handler let cb let i = cbs.length while (i--) { cb = cbs[i] if (cb === fn || cb.fn === fn) { cbs.splice(i, 1)//找到他 并且移除他 break } } return vm } // 发送事件 Vue.prototype.$emit = function (event: string): Component { const vm: Component = this if (process.env.NODE_ENV !== 'production') { const lowerCaseEvent = event.toLowerCase() if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip( `Event "${lowerCaseEvent}" is emitted in component ` + `${formatComponentName(vm)} but the handler is registered for "${event}". ` + `Note that HTML attributes are case-insensitive and you cannot use ` + `v-on to listen to camelCase events when using in-DOM templates. ` + `You should probably use "${hyphenate(event)}" instead of "${event}".` ) } } // 找到这个方法 let cbs = vm._events[event] if (cbs) { cbs = cbs.length > 1 ? toArray(cbs) : cbs
// 把传过来的参数去掉第一个，转化成参数数组
const args = toArray(arguments, 1) const info = `event handler for "${event}"` for (let i = 0, l = cbs.length; i < l; i++) { // 执行这些方法 invokeWithErrorHandling(cbs[i], vm, args, vm, info) } } return vm } }
可以看到：添加事件时候会把方法放到Vue的_events对象上，这个对象的key是事件名，value是fn数组；你调用$emit时候，他会根据你传过来的事件名称去找到对应的fn数组，循环执行之。
看源码意外收获：
1. 注册事件时候事件名而已传数组
2. 一个/组事件名可以绑定不同的方法，执行时候按顺序一并执行
3. 解除事件监听时候需要传事件名和方法进来
4. 注册一次性事件是怎么完成的
over！