1.問(wèn)題

• 是否非父子非兄弟關(guān)系的組件不能通過(guò)bus通訊？請(qǐng)各位大佬賜教解疑
• 這個(gè)問(wèn)題的 目的是更深入理解bus 的過(guò)程產(chǎn)生的，請(qǐng) 不要說(shuō)用vuex

2.代碼思路

• 在路由中注冊(cè)a組件,b組件
• 在bus.js創(chuàng)建空的 Vue 實(shí)例作為事件總線
• 訪問(wèn)a組件的頁(yè)面: /aaa。然后點(diǎn)擊按鈕，通過(guò)bus派發(fā)事件
• 在b組件中監(jiān)聽bus的自定義事件。但在a組件中派發(fā)事件后再訪問(wèn)b組件，b組件的監(jiān)聽函數(shù)未執(zhí)行

如沒能看懂，拜托復(fù)制相關(guān)代碼在本地跑下

3.相關(guān)代碼（基于vue-cli）

組件a

    <template>
      <div>
          組件a
          <button @click="sendMsg">問(wèn)候組件b</button>
      </div>
    </template>
    <script>
    import bus from './bus'
    export default {
        methods: {
            sendMsg() {
                bus.$emit('send', '組件b你好嗎？')
                this.$router.push('/bbb')
            }
        }
    }
    </script>

組件b

<template>
    <div>
        <p>組件b：{{ msg }}</p>
    </div>
</template>
<script type="text/javascript">
import  bus  from './bus'
export default {
    data () {
        return {
            msg: 'msg初始值'
        }
    },
    mounted () {
        bus.$on('send', data => {
            console.log(data)
            console.log(this)
            this.msg = data
        })    
    } 
  
}
</script>

bus.js

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

路由

const aaa = () => import('@/components/zujian/bus/a')
const bbb = () => import('@/components/zujian/bus/b')
export default new Router({
  routes: [{
      path: '/aaa',
      component: aaa
    },
    {
      path: '/bbb',
      component: bbb
    }]
})