Vue的全局事件总线

已于 2022-05-23 09:36:37 修改
阅读量246 收藏
点赞数
分类专栏： Vue
于 2022-05-22 23:56:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40733968/article/details/124876735
版权

Vue 全局事件总线 组件通信 TodoList 应用优化
关键词由CSDN通过智能技术生成

提示：本文主要对Vue里的全局事件总线进行总结，并优化之前做过的TodoList案例

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

本文主要对Vue里的全局事件总线进行总结，并优化之前做过的TodoList案例

提示：以下是本篇文章正文内容

全局事件总线

全局事件总线原理图

在这里插入图片描述

1、 全局事件总线1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、 全局事件总线2

验证一下

在这里插入图片描述
在这里插入图片描述

兄弟组件间的通信:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3、 使用vm

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
student.vue
在这里插入图片描述
School.vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、 总结

在这里插入图片描述

5、 TodoList案例_事件总线

在这里插入图片描述
app.vue:
在这里插入图片描述

MyItem.vue
在这里插入图片描述

在这里插入图片描述

pigpigpi
关注
专栏目录
关于vue基于bus事件总线通信时$on同一时间内多次被触发问题解决方案
cabinx的博客
09-17 1959
关于vue基于bus事件总线通信时$on同一时间内多次被触发问题解决方案 1.问题描述： vue项目在兄弟组件中使用了bus事件总线通信，当前使用场景是：在A页面通过bus.$emit传递给B组件一个信号，此信号的作用是告知B组件打开dialog弹窗，而B组件接收到信号后出现了多次弹窗问题，此问题根源在于bus.$on在同一时间多次触发。 2.解决方案： 这里解决方案的核心是先关闭接收再触发接收，即： mounted() { bus.$off('test') bus.
Vue事件总线
Xwz的博客
04-18 6212
1.常见的组件通信方式 pros:父组件传子组件 自定义事件:子组件传父组件 vuex:均可实现 插槽:父组件传子组件 pubsub-js:均可实现（较少用） $bus全局事件总线:均可实现 2.事件总线的介绍 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线来实现。塔相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件,它就类似沟通桥梁的概念...
Vue事件总线实例（全局事件）
移动开发学习笔记
05-13 835
得到事件总线对象 // src/assets/js/event-bus.js import Vue from 'vue' export const EventBus = new Vue() 注册监听事件 <script> import { EventBus } from '@/assets/js/event-bus.js' export default { name: 'CustomerManagement', data () { return { } },
vue案例todo-list(computed，methods，传参等技术练手)
weixin_45843676的博客
02-20 429
vue案例todo-list(computed，methods，传参等技术练手)
vue中通过watch监听数据变化，带来的性能优化
热门推荐
Yang Yong 的博客
07-17 4万+
问题背景 为什么要用 vuex? 在使用 Vue 进行组件化开发时，组件通信是一个十分重要的部分。在 Vue 中，父子组件的关系可以总结为 父子组件通信：父组件通过 props 向下传递数据给子组件 子父组件通信：子组件通过 events 给父组件发送消息 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 非父子组件通信：使用...
Vue 全局事件总线
PinkCoder
08-07 751
Vue 全局事件总线
vue全局事件总线
BrotherJinJin的博客
06-27 1103
Vue全局事件总线
Vue-全局事件总线_vue 全局事件总线
2401_84446548的博客
04-29 902
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue全局事件总线
weixin_44277207的博客
07-24 242
Vue全局事件总线
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。 仅添加5个Vue-geb-全局事件总线Vue-geb是一个vue全局事件总线插件，可利用可观察对象的功能帮助在应用...
后端SpringBoot及vue proxyTable解决跨域
qq_42059717的博客
11-06 182
昨天上线项目遇到了一个奇怪的问题，本来服务实在腾讯云的轻量应用服务器的，但是迁移到一个香港的服务器之后就出现了各种各样的问题。Nginx 开启Https Springboot开启Https，先后出现了噔噔蹬蹬但是我其实已经部署了一个项目了的，那个用的proxyTable,新部署的这个用的是里边的env控制的。后来改成proxyTable就好了。
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
Bitter的博客
11-01 387
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 845
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
el-table type=“selection“换页多选数据丢失的解决办法
weixin_46112174的博客
11-01 376
设置以后就可以保留之前选中的选项，但还要设置row-key。element里有一个。
【660】基于SSM+Vue的在线学习系统设计与实现
paopaokaka_luck的博客
11-03 695
IDEA的诞生在Java集成开发工具行业正所谓平地起雷，瞬间震动了整个Java开发行业。真的是每个人用过的都说好。IDEA之所以相比于其他比如MyEclipse或者Eclipse之类的Java开发工具来讲比较好，原因首先在于设计方面。IDEA采用了所谓的人体工程学设计原理，让使用IDEA的人员用了就忘记不了。软件打开首先要设置主题，可以选择常规的白色或者暗色系列，长时间的白色或者长时间的暗色会让开发人员的眼睛疲劳加重，首先从这个细节就让程序开发人员备受青睐，让程序员看着舒服；
fastapi_socketio连接vue的socktio.client
最新发布
u014220146的博客
11-06 295
所以默认配置是客户端连接时使用的路径时ws，而不是http， 并且路径还要带上socketio.io。提示：如果遇到跨域问题自行解决。
在vue中 什么是slot机制，如何使用以及使用场景详细讲解
Sherry Tian的博客
11-03 305
vue中slot是什么，有哪些使用场景，有什么优势
vue全局事件总线获取属性
09-09
您可以使用Vue的全局事件总线来获取属性。首先，在您的Vue应用程序的入口文件或任何需要使用事件总线的地方，您需要创建一个Vue实例，并将其作为事件总线。 ```javascript // main.js or any other file where you create Vue instance import Vue from 'vue' // Create a new Vue instance as event bus export const EventBus = new Vue() ``` 然后，您可以在任何组件中导入该事件总线，并使用它来发布和订阅事件。 ```javascript // ComponentA.vue import { EventBus } from 'path/to/main.js' export default { created() { // 订阅事件 EventBus.$on('eventName', this.handleEvent) }, destroyed() { // 取消订阅事件，防止内存泄漏 EventBus.$off('eventName', this.handleEvent) }, methods: { handleEvent(data) { // 处理事件 console.log(data) // 打印获取的属性值 } } } ``` ```javascript // ComponentB.vue import { EventBus } from 'path/to/main.js' export default { methods: { someMethod() { // 获取属性，并通过事件总线发布事件 const attribute = 'someValue' EventBus.$emit('eventName', attribute) } } } ``` 在上面的示例中，`ComponentB.vue`通过事件总线将属性值发送给`ComponentA.vue`，然后在`ComponentA.vue`中处理该值。通过这种方式，您可以在不通过父子组件传递的情况下在不同组件之间共享属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值