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

posted @   西瓜霜  阅读(48)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· 因为Apifox不支持离线,我果断选择了Apipost!
历史上的今天:
2020-06-28 easyui datagrid treegrid 列 操作按钮
2020-06-28 git 忽略上传指定文件 命令
点击右上角即可分享
微信分享提示