0
点赞
收藏
分享

微信扫一扫

Vue兄弟组件之间通信 eventBus

Vue兄弟组件之间通信 eventBus_发送消息# Vue兄弟组件之间通信 eventBus

> 今天碰到了这个问题,两个毫无关联的组件之间需要通信,怎么办!使用 props 一层一层的传肯定是有问题的,当然可以实现,在一个就是Vuex,定义一个公共变量也是可以的,但是相对来说比较好的实现方式就是 eventBus 了吧。 > 其实我觉得我现在的状态就特别好,有个志同道合的人,无论在生活还是工作上遇到问题都可以敞开了探讨,没有避讳,不管最后能不能解决,都是一种收获!

Vue兄弟组件之间通信 eventBus


今天碰到了这个问题,两个毫无关联的组件之间需要通信,怎么办!使用 props 一层一层的传肯定是有问题的,当然可以实现,在一个就是Vuex,定义一个公共变量也是可以的,但是相对来说比较好的实现方式就是 eventBus 了吧。



其实我觉得我现在的状态就特别好,有个志同道合的人,无论在生活还是工作上遇到问题都可以敞开了探讨,没有避讳,不管最后能不能解决,都是一种收获!


使用

一、使用 eventBus 首先我们创建一个 bus.js 文件,里面的内容如下:

import Vue from 'vue';  
export default new Vue();

没有看错,就两行,够了!

二、在需要使用 eventBus 的组件中引入上面创建的 bus.js 文件。

import Bus from 'common/js/bus.js';   // 这个文件路径写自己的

三、发布Bus消息的组件

Bus.$emit('getTarget', event.target);

四、接收Bus消息的组件

Bus.$on('getTarget', target => {  
console.log(target);
});

注意哈,这个其实就是发布订阅的关系,接收消息的这一段也就是第四条,他要在页面一加载出来就订阅,不然发的消息可能接收不到,一般写在 created 或者是 mounted 钩子里面。

使用案例

两个组件,dome01 和 demo02 ,两个组件从 dome01 发送消息给 demo02,dome02 收到 dome01 发送的消息后展示到自己的界面上去!不使用 props 和 Vuex ,就使用 eventBus 实现。

首先创建 bus.js 文件

import Vue from 'vue';  
export default new Vue();

Vue兄弟组件之间通信 eventBus_git_02

编写 dome01 组件

<template>
<div>
<h2>这是demo01组件</h2>
<button @click="add"> 点击向dome02组件发送消息 </button>
</div>
</template>

<script>

import Bus from '../utils/bus'

export default {
methods:{
// 点击按钮发送Bus消息
add(){
// 发送 myMsg 主题 的Bus消息
Bus.$emit('myMsg', "你好啊,我叫王佳伟");
// 打印一下日志
console.log("dome01组件发送完消息:bus事件触发了")
}
}
}
</script>

Vue兄弟组件之间通信 eventBus_发布订阅_03

编写 dome02 组件

<template>
<div>
<h2>这是dome02组件</h2>
<h3>这个地方展示dome01组件的命令</h3>
<!-- 把 dome01 发过来的消息渲染到下面 -->
<span>{{msg}}</span>
</div>
</template>

<script>

// 引入bus.js文件
import Bus from '../utils/bus'

export default {
data() {
return {
msg: "wjw"
};
},
// 在mounted钩子里面就开始定阅myMsg主题的消息
mounted() {
Bus.$on('myMsg', myMsg => {
console.log("dome02组件收到bus消息:",myMsg);
this.msg = myMsg
});
}
};
</script>

Vue兄弟组件之间通信 eventBus_git_04
然后添加到父组件,这个就很简单不写了。

跑起来看效果

Vue兄弟组件之间通信 eventBus_发布订阅_05

【案例源码】
​​​https://gitee.com/wjw1014/vue_learning_vuex/tree/master/src/components​​

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​​


举报

相关推荐

0 条评论