vue事件总线

最新推荐文章于 2024-07-28 20:43:52 发布

和小灰

最新推荐文章于 2024-07-28 20:43:52 发布

阅读量477

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47880276/article/details/124531724

版权

本文介绍了Vue框架中如何利用事件总线进行组件间的通信。事件总线是一种通过创建空Vue实例作为中央事件调度中心，实现不同组件之间数据共享和交互的方法，适用于父子、兄弟及跨级组件通信。

摘要由CSDN通过智能技术生成

文章目录

前言
一、事件总线
二、实现方式

前言

组件是vue框架强大功能之一，而组件的作用域相互独立，所以组件之间数据无法直接引用，但可以是用事件总线实现数据共享

一、事件总线

这种方法通过一个空的vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

二、实现方式

//创建vm
new Vue({
   
	el: '#app',
	render: h => h(App),
	beforeCreate() {
   
		Vue.prototype.$bus = t

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

和小灰

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【uni-app】2-1 uniapp & vue 事件总线

蜗牛的博客

10-27

922

事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

vue 事件总线（总线传值），eventBus的使用

PrimaryColor

08-24

1080

介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。一、首先在main.js里面初始化一个事件总线实例。其实就是重新构造一

参与评论您还未登录，请先登录后发表或查看评论

Vue组件通信中央事件总线实例

09-28

介绍Vue组件之间的通信方式，本资源主要是介绍中央事件总线这种模式，代码中详细示范了如何使用中央事件总线来通信

Vue事件总线

Xwz的博客

04-18

6242

1.常见的组件通信方式 pros:父组件传子组件自定义事件:子组件传父组件 vuex:均可实现插槽:父组件传子组件 pubsub-js:均可实现（较少用） $bus全局事件总线:均可实现 2.事件总线的介绍如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线来实现。塔相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件,它就类似沟通桥梁的概念...

Vue-全局事件总线

m0_64081601的博客

03-23

3496

在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。

Vue 全局事件总线

Errol's Blog

04-10

8508

Vue 全局事件总线

Vue事件总线插件监听在线/离线更改-JavaScript开发

05-26

vue-connection-listener Vue事件总线插件侦听在线/离线更改关于每当导航器的连接状态更改时，都会发出带有布尔有效载荷的“连接”事件，该负载指示新的st vue-connection-listener Vue事件总线插件侦听在线/离线...

vue-connection-listener:Vue事件总线插件监听在线离线更改

04-28

Vue事件总线插件监听在线/离线更改关于每当导航器的连接状态更改时，都会发出“连接”事件，并带有一个指示新状态的布尔有效负载（在线= true，离线= false）。安装 npm install --save vue-connection-listener ...

Vue事件总线（Event Bus）

热门推荐

明天也要努力的博客

03-06

1万+

传送门：Vue中子组件向父组件传值及 .sync 修饰符详解传送门：Vue状态管理器（vuex）详解及应用场景传送门：Vue中 $ attrs、$ listeners 详解及使用 1. 简介 Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？如果应用程序不需要类似 Vuex 这样的库来处理组件之

vue之事件总线

Jack, what else can you do besides holding your little darling?

10-25

404

1.事件总线介绍在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事

vue中事件总线

weixin_44795287的博客

01-04

164

1.新建一个vue实例化js文件 js文件代码 2.向这个vue实例化文件传值 <script> import parent from "../../components/comment/parent"; import events from "../../utils/events"; export default { components: { parent }, props: ["comment"], methods: { sendparentid() {

Vue中的事件总线

aYao__的博客

03-06

865

事件总线是为方便vue中组件之间的通信而出现的核心原理： VueComponent.prototype.__proto__ === Vue.prototype 通俗来讲就是组件vc的实例对象可以访问到Vue原型对象上的方法，因此可以在vue原型对象上创建一个对象，这样所有的组件实例vc都能访问该对象从而实现组件间通信创建事件总线： new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t

vue事件总线（Event Bus）

qq_20074443的博客

03-15

720

bus总线使用背景数据展示项目中，侧边菜单栏有一个展开收缩的功能，这会导致右侧的宽度会发生变化，但是图表并没有根据宽度的变化自适应。于是想到根据菜单栏的伸缩状态去手动resize图表，这个状态需要在非兄弟组件之间传递，于是用了vue中的Event Bus. Event Bus使用方法 1.Event Bus的初始化 Event Bus的创建方式有两种，一种是创建一个.js文件： import...

vue 事件总线 eventBus

qq_34904695的博客

07-14

210

父组件向子组件传递参数用v-bind 子组件向父组件传递参数用this.$emit 兄弟组件传参eventBus或者是用vuex进行传递下边说说eventBus 首先在src的assets的目录下新建一个vue-bus.js文件 import Vue from 'vue' export default new Vue() 兄弟组件 a组件 import Bus from '@/assets/js/vue-bus.js' methods: { handlerClick(event) { Bus.$

vue事件总线的缺点

08-01

回答: vue事件总线的缺点主要有以下几点。首先，由于事件总线是一个全局的对象，所以在大型项目中容易出现命名冲突的问题，即不同组件使用相同的事件名称可能会导致意外的触发。其次，事件总线的使用可能会导致代码...