需求

vue兄弟組件或者互不關(guān)聯(lián)的組件間的通訊

基本實(shí)現(xiàn)原理

使用bus總線eventbus來實(shí)現(xiàn)，很簡(jiǎn)單

上代碼

1. 封裝公共bus.js文件

import Vue from 'vue'
export default new Vue

有木有感覺簡(jiǎn)單無(wú)腦，實(shí)際上就是實(shí)例化一個(gè)vue文件，把事件掛載在新實(shí)例化的Vue下面，通過$emit通知修改，在其他組件的mounted生命周期中使用$on接受通知并作出相應(yīng)的響應(yīng)

2. 使用通訊總線

發(fā)送通知

//  先引入bus.js
import Bus from "@/utils/bus"
Bus.$emit("msg", {
  //  填寫需要傳遞的數(shù)據(jù)
})
//  或者不傳對(duì)象
Bus.$emit("msg", '你好')

接收通知

//  先引入bus.js
import Bus from "@/utils/bus"
Bus.$on("msg", (data) => {
  console.log(data)
})

需要注意的是事件名稱要一致，并且多個(gè)事件名不要重復(fù)

結(jié)束語(yǔ)

不到迫不得已，不要濫用通訊總線，另外還有一個(gè)小坑 解決vue使用bus被多次觸發(fā)問題