vue兄弟组件之间的通信（bus.js）方法

时间：2019-08-21 01:31:56 阅读：133 评论：0 收藏：0 [点我收藏+]

如题：有组件A，组件B，

组件A用函数（方法）触发组件B中的函数（方法）

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

2.两个组件都需要引用这个js文件：

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

我的js文件是放在根目录下的assets文件夹下

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

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

vue兄弟组件之间的通信（bus.js）方法

原文：https://www.cnblogs.com/PiaoYu/p/11386373.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)