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主键的页面效果了.

也可以使用状态管理来传递参数，我们下次讨论。