vue兄弟組件之間的通信（bus.js）方法

如題：有組件A，組件B，

組件A用函數（方法）觸發組件B中的函數（方法）

1.需要新建一個js文件：bus.js

2.兩個組件都需要引用這個js文件：

import bus from "../assets/bus.js";

我的js文件是放在根目錄下的assets文件夾下，

bus文件代碼如下：

import Vue from 'vue'
export default new Vue

 

 

3.A組件新建一個方法（函數）例如：

 closeoropenLeftnav() {
      if (this.IsShowLeft) {
        this.IsShowLeft = false;
        this.className = "GkCloseOrOpen";
      } else {
        this.IsShowLeft = true;
        this.className = "";
      }
      bus.$emit("IsCollapse", this.IsShowLeft);
    }

關鍵代碼：

bus.$emit("IsCollapse", this.IsShowLeft);

 this.IsShowLeft：這個是A組件要傳給B組件的值

4.B組件需要接收A組件傳來的參數，然后進行處理，代碼如下：

 created() {
    bus.$on("IsCollapse", propMsg => {
        this.isCollapse = propMsg; })
  },

關鍵代碼：

bus.$on("IsCollapse", propMsg => {

this.isCollapse = propMsg;

})，

propMsg 就是A組件出來的參數，這樣就可以在鈎子里控制B組件的變量，然后觸發B主鍵的頁面效果了.

也可以使用狀態管理來傳遞參數，我們下次討論。