vue中实现任意组件间通信(全局事件总线、消息订阅与发布)

news/2024/11/19 23:41:44/

1.全局事件总线,顾名思义,可以适用于任意组件间通信,我们需要通过$bus这个中间傀儡来实现,我们可以把$bus安装到Vue身上,这样可以让所有组件都能看到它,

1.1安装全局事件总线:我们可以在new Vue()时,在其beforeCreate生命周期里,加上Vue.prototype.$bus=this,此时的this指向的是Vue,由于Vue只有一个,并且都在各组件的原型链上

创建vmnew Vue({el:'#app',render: h =>h(App),beforeCreate() {Vue.prototype.$bus = this}
})

1.2.接收数据:我们可以给需要接收数据的一方加上

mounted(){this.$bus.$on('指令名',(data)=>{console.log('收到了数据',data)})
},
beforeDestory(){this.$bus.off('指令名')
}

1.3.提供数据:我们可以给需要提供数据的一方加上

methods:{sendStudentName(){this.$bus.$emit('指令名',数据)}
}提供数据的一方

2.消息订阅与发布

2.1安装js库

npm i pubsub-js

2.2确定收发方

发送方:
methods:{sendStudentName(){pubsub.publish('hello',666)}
}接收方:写法一:mounted(){ //其中需要注意的是此时函数里的this已经不指向VueComponent,//我们可以写成箭头函数的形式this.pubId = pubsub.subscribe('hello',function(msgName,data){console.log('有人发布了hello消息',hello消息的回调执行了,msgName,data)}},beforeDestory(){pubsub.unsubscribe(this.pubId)}写法二:methods: {demo(magName,data){console.log('hello消息收到了',data)}},mounted(){this.pubId = pubsub.subscribe('hello',this.demo)},beforeDestory(){pubsub.unsubscribe(this.pubId)}


http://www.ppmy.cn/news/103592.html

相关文章

【机器学习】Kullback-Leibler (KL) divergence(KL 散度)

KL 散度是衡量两个概率分布之间差异的方法,我们首先考虑衡量两个概率分布之间差异的意义是什么: 模型评估与选择:在机器学习中,我们需要训练模型来拟合数据的概率分布。衡量预测分布与真实分布之间的差异可以帮助我们评估模型的性能&#xff…

09:mysql---事务

目录 1:事务简介 2:事务操作 3:事务四大特性 4:并发事务问题 5:事务隔离级别 1:事务简介 事务 是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功&…

如何使用Axios发送异步请求?

首先,让我们来介绍一下Axios。Axios是一个基于Promise的HTTP客户端,它可以帮助我们轻松地发送异步请求。它支持所有现代浏览器(包括IE8),并且还提供了Node.js的版本。 那么,如何使用Axios发送异步请求呢&a…

2023年上半年 软件设计师答案解析

前言:2023年上半年软考已经落幕了,学长整理了一下软件设计师的题目以及个人理解的答案(仅供参考)希望能够帮助参加软考的各个小伙伴能够清晰的估分,希望大家都能通过考试~ 目录 2023年上半年 软件设计师 上午试卷 2023…

【详解Collection接口、迭代器和Colletions工具类】

🌠作者:TheMythWS. 🎆专栏:《集合与数据结构》 🎇座右铭:不走心的努力都是在敷衍自己,让自己所做的选择,熠熠发光。 目录 👀Collection接口的常用方法 💨…

ElasticSearch 报错集锦及解决方法

关联链接 1. Django 扩展 Elasticsearch - 启动与关闭 - 启动报错问题解决方法 2. Centos 7 安装Elasticsearch 6.2.4 - tar 包安装 - elasticsearch head(浏览器插件)和kibana 插件 tar 安装 1、报错 Error: Could not find or load main class org.e…

全渠道电子商务指南

希望将全渠道电子商务纳入您的业务战略,但不确定从哪里开始。这篇博文将指导您了解全渠道商务的基础知识,以及它与多渠道方法的区别。 全渠道电子商务旨在为线上和线下多个平台的客户创造全面的购物体验。客户可以通过各种接触点(例如网站、…

GJB设计开发各阶段的文件和记录要求

阶段 NO 内容 论证立项阶段 输入 1 合同<