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

第一种:eventBus

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

文件内容:

import Vue from 'vue';  

export default new Vue();

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

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

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

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

 //写你需要的方法

})

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

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

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

另一个兄弟组件中执行

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

在这里插入图片描述

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

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

同时,需要关闭该通信,尤其是接口调用的时候,关闭方法 this.**.$off(“通信名称”)
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/106103956