Vue組件通信:任意組件之間進行通信

之前一篇博客，我們介紹了子組件向父組件通信的方法，可以參考博客：

深度理解Vue組件的子組件向父組件傳遞資料的通信方式，全面詳細，看這一篇就夠了，推薦收藏_czjl6886的博客-CSDN博客

今天，我們來講一講，任意組件之間的通信方法，主要有全域事件總線、訊息訂閱與發布、vuex和快取，vuex和快取在實際開發中不經常使用，因此就只講前面2種方式，

目錄

方法一：全域事件總線

第一步：安裝全域事件總線：

第二步：使用全域事件總線

方法二：訊息訂閱與發布

1.安裝 pubsub：npm i pubsub-js

2.引入：import pubsub from 'pubsub-js'

3.接收與發送資料

公共事件總線、訊息訂閱與發布的區別：

方法一：全域事件總線

全域事件總線，是程式員們，在開發程序中，對現有東西和經驗的總結與整合，不是一個新的API或其他新的東西，

第一步：安裝全域事件總線：

在 main.js 檔案中，添加代碼：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 安裝全域事件總線
  beforeCreate(){
    Vue.prototype.$bus = this
  }

}).$mount('#app')

即：第 9-11 行代碼，含義是向 Vue 的原型上添加一個全域屬性 $bus ，這個全域屬性的名字是自定義的，可以命名為 zongxian、abc 等等，但是一般我們都是定義為 bus ，或者 $bus ，我這里定義為 $bus ，每個 vue 實體中，就會有這個 $bus 屬性，

如下圖：

因為 bus 有 計算機系統的總線 的含義，所以我們就常用這個來命名，

第二步：使用全域事件總線

案例： Brother1 組件與 Brother2 組件進行通信，點擊 Brother2 組件的按鈕，將 Brother2 組件的姓名傳給 Brother1 組件

Brother1 組件接收Brother2 組件中的資料，則在Brother1 組件中給 $bus 系結自定義事件，事件的回呼函式在 Brother1 組件中定義，

Brother1 組件接收資料：

methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}

上述的這種形式是：在methods中定義一個demo函式，在掛載的程序中，將一個自定義事件XXX，與demo函式系結，然后掛載完畢執行函式demo，即：組件一掛載完就去監聽該事件，

事件名字和函式名字都可以隨意命名，

<template>
  <div class="outer">
    <h2>我是Brother1組件</h2>
    <h3>姓名：{{name1}}</h3>
    <!-- <button>點我將Brother1的姓名傳給Brother2</button> -->
  </div>
</template>

<script>
export default {
  name:'Brother1',
  data(){
    return{
      name1:"小李"
    }
  },
  methods: {
    demo(data){
      console.log('我是Brother1組件，我收到了Brother2組件的name：',data);
    }
  },
  mounted() {
    this.$bus.$on('helloName',this.demo)
  },
}
</script>

<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: lightblue;
  margin-left: 30px;
  margin-top: 50px;
  float: left;
}
</style>

上述形式可以簡寫為下面：將定義回呼函式，直接與自定義事件系結在一起

注意：回呼函式要寫成箭頭函式的形式

mounted() {
this.$bus.$on('xxxx',回呼函式)
}

<template>
  <div class="outer">
    <h2>我是Brother1組件</h2>
    <h3>姓名：{{name1}}</h3>
    <!-- <button>點我將Brother1的姓名傳給Brother2</button> -->
  </div>
</template>

<script>
export default {
  name:'Brother1',
  data(){
    return{
      name1:"小李"
    }
  },
  // methods: {
  //   demo(data){
  //     console.log('我是Brother1組件，我收到了Brother2組件的name：',data);
  //   }
  // },
  mounted() {
    this.$bus.$on('helloName',(data) => {
      console.log('我是Brother1組件，我收到了Brother2組件的name：',data);
    })
  },
}
</script>

<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: lightblue;
  margin-left: 30px;
  margin-top: 50px;
  float: left;
}
</style>

注意事項：最好在beforeDestroy鉤子中，用$off解綁當前組件所用到的事件，避免同事寫的代碼中出現同名事件，導致代碼bug

beforeDestroy() {

this.$bus.$off('helloName')

},

Brother2 組件提供資料：

Brother2 組件觸發相應事件，將資料傳給Brother1 組件

this.$bus.$emit('xxxx',資料)

<template>
  <div class="outer">
    <h2>我是Brother2組件</h2>
    <h3>姓名：{{name2}}</h3>
    <button @click="sendName">點我將Brother2的姓名傳給Brother1</button>
  </div>
</template>

<script>
export default {
  name:'Brother2',
  data(){
    return{
      name2:"小王"
    }
  },
  methods: {
    sendName(){
      this.$bus.$emit('helloName',this.name2)
    }
  },
}
</script>

<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: pink;
  margin-left: 30px;
  margin-top: 50px;
  float: left;
}
</style>

最后實作的效果如下：

方法二：訊息訂閱與發布

案例：

Brother1 組件與 Brother2 組件進行通信，點擊 Brother2 組件的按鈕，將 Brother2 組件的姓名傳給 Brother1 組件

使用步驟：

1.安裝 pubsub：npm i pubsub-js

2.引入：import pubsub from 'pubsub-js'

在 Brother1 組件與 Brother2 組件中引入 pubsub

3.接收與發送資料

Brother1 組件接收資料，則在Brother1 組件中訂閱訊息，訂閱的demo回呼函式留在Brother1 組件里面，形式如下：

methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //訂閱訊息
}

<template>
  <div class="outer">
    <h2>我是Brother1組件</h2>
    <h3>姓名：{{name1}}</h3>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name:'Brother1',
  data(){
    return{
      name1:"小李"
    }
  },
  methods: {
    demo(msgName,data){
      console.log('訊息名字是:',msgName);
      console.log('我是Brother1組件，我收到了Brother2組件的name：',data);
    }
  },
  mounted() {  
    this.pid = pubsub.subscribe('helloName',this.demo)
  },
}
</script>

<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: lightblue;
  margin-left: 30px;
  margin-top: 50px;
  float: left;
}
</style>

上述形式，可以簡寫為 下面形式：注意，回呼函式要寫成箭頭函式的形式

mounted() {
this.pid = pubsub.subscribe('xxx',回呼函式) //訂閱訊息
}

為避免出現錯誤 ，最好在 beforeDestroy 鉤子中，用 PubSub.unsubscribe(pid)去取消訂閱

Brother2 組件提供資料：形式為如下：

注意下面的'xxx'，名字一定要和接收資料的組件中，訂閱的訊息名一樣

pubsub.publish('xxx',資料)

<template>
  <div class="outer">
    <h2>我是Brother2組件</h2>
    <h3>姓名：{{name2}}</h3>
    <button @click="sendName">點我將Brother2的姓名傳給Brother1</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name:'Brother2',
  data(){
    return{
      name2:"小王"
    }
  },
  methods: {
    sendName(){
      pubsub.publish('helloName',this.name2) //發布訊息
    }
  },
}
</script>

<style scoped>
.outer{
  width: 400px;
  height: 400px;
  background-color: pink;
  margin-left: 30px;
  margin-top: 50px;
  float: left;
}
</style>

最終實作的效果如下：

公共事件總線、訊息訂閱與發布的區別：

注意：非常重要！！！

訂閱訊息時，箭頭函式的引數和公共事件總線的箭頭函式引數不一樣了，第一個是訊息的名稱，第二個是訊息攜帶的資料

PS：如果對你有幫助的哈，建議一鍵三聯！，如有疑問，歡迎在評論區留言噢！