Vue---兄弟组件通信(三种方式)

 时间:2026-04-23 22:42:57

1、第一种:eventBus

新建一个js文件, 我这里叫做 bus.js;

文件内容:

          import Vue from 'vue';  

         export default new Vue();

   然后在你需要触发的 组件中引入   import   bus  from  '文件路径'

         执行:bus.$emit('触发名称', 传输的数据 )

最后在你需要的通信的另一个组件中   mounted生命周期钩子中执行如下:

    bus.$on('触发名称', res => {

    //写你需要的方法

})

2、第二种:直接在 main.js中 直接如下

然后其中一个兄弟组件 执行

this.$root.vm.$emit('触发名称', 传输的数据);

另一个兄弟组件中执行

this.$root.vm.$on('触发名称', 传输的数据);

Vue---兄弟组件通信(三种方式)

3、第三种:同样是直接在 main.js

注意:emit  和 on 中 第一参数 触发名称 必须相同,同时二者原理一致

同时,需要关闭该通信,尤其是接口调用的时候,关闭方法 this.**.$off("通信名称")

Vue---兄弟组件通信(三种方式)

  • R语言下载和安装
  • 常见转动惯量是什么
  • lableshop(标签打印机)软件的基本操作
  • 如何答好应急应变中条件缺失类题目?
  • word中如何将文本转化为表格
  • 热门搜索
    四字词语大全 怎么腌制咸鸭蛋 图片怎么转换成pdf 营业执照过期了怎么办 怀孕呕吐怎么缓解 跳绳减肥的正确方法 第二个路由器怎么设置 去黑头的最好方法 淘宝怎么修改密码 家常菜的做法大全家常炒菜