vue2 发布订阅模式

场景

组件A引用组件B,组件B引用组件C

当组件C有一些事情想通知组价A做的时候,就可以这么搞

流程

1.新建一个EventBus.js

就是新建一个vue实例

import Vue from 'vue';
var EventBus = new Vue();
export default EventBus;

2.1在需要接收消息的页面引入步骤一的文件

import EventBus from '../../common/EventBus'

2.2然后在需要的生命周期中写上接收代码

swiperChange可以理解是事件名称,message是通知内容

EventBus.$on('swiperChange', (message) => {
　　this.swiperBGArr = message;
});

3.1在需要发送通知的地方同样引入第一步的文件

import EventBus from '../../../../common/EventBus';

3.2发送通知

EventBus.$emit('swiperChange', '内容');

 

总结

其实和父子组件通信很像,具体原理和细节我也不懂,我只是会用

 

参考

https://blog.csdn.net/weixin_45811256/article/details/131782621