vue非父子组件通信（踩坑）

开发中遇到非父子组件通信怎么办？

通常方法一如下：

创建一个eventBus.js,

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

然后在两个通信的组件中引入此js

import bus from './components/eventBus.js'

在组件A中

bus.$emit('id', 1)

在组件B中

// 在组件 B 创建的钩子中监听事件
bus.$on('id', function (id) {
  // ...
})

这样就完成了数据传递，但是有个坑在这里，两个组件必须完全渲染过才能实现数据通信，如果组件A通过路由跳转到组件B，组件A销毁，组件B开始渲染，是没法监听到事件的。所以在此类情况下的非父子组件通信，需要用vuex实现