Vue兄弟组件之间通信 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();
编写 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>
编写 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>
然后添加到父组件,这个就很简单不写了。
跑起来看效果
【案例源码】
https://gitee.com/wjw1014/vue_learning_vuex/tree/master/src/components
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014