vue事件车《兄弟组件传值》

最新推荐文章于 2025-06-30 12:25:16 发布
最新推荐文章于 2025-06-30 12:25:16 发布
阅读量1.9k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue组件间传值 文章标签： vue事件车 eventBus 组件传值 vue兄弟组件传值 vue父子组件传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jibulai100/article/details/90203487
本文介绍如何使用中央事件总线在Vue兄弟组件间进行通信。首先创建eventBus.js作为组件通信桥梁，然后在需要触发事件的组件中引入并绑定事件，最后在接收值的兄弟组件中引入eventBus并实现同步刷新。注意事件销毁需手动调用eventBus.$off。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • Vue事件车《兄弟组件传值》

一 .先创建中央事件总线，在src/utils/下创建一个eventBus.js,内容如下:

（eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。）

二 . 在触发事件的组件里，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件

三 . 我们再创建一个兄弟组件（接收值，去实现同步刷新和其他处理），引入eventBus事件总线，并同步刷新

要注意的是：$on事件是不会自动清楚销毁的，需要我们手动来销毁，要通过eventBus.$off来关闭

 

Vue3 父子组件传值相互调用方法,兄弟组件传值相互调用方法
weixin_45638884的博客
04-11 1314
fill:#333;color:#333;color:#333;fill:none;父组件子组件1子组件2孙子组件孙子组件。
Vue 事件总线 兄弟组件之间传值
weixin_43835059的博客
02-12 800
Vue事件总线 evenbus 兄弟组件之间传值 vue传值方式主要有四种 1.路由带参数传值 2.父子组件之间传值，父传子用props，子传父用emit 3.如果是大项目可以使用vuex传值，小项目少页面可以使用evenbus之间进行传值 事件总线之间传值可以分为两种，一种全局事件传值，一种单独设一个js文件进行引用传值 第一种：全局使用，在main.js中用vue的原型对象上添加一个bus...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。 新增按钮组件： 操作按钮组合组件： 此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。 此时就需要用到组件间的事件触发。 父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
Vue 事件车
qq_42455145的博客
06-01 3067
1：非父子之间的事件车传值 在main.js之中定义一个新的对象 //非父组件之间的通信使用事件车 来源于new Vue() Vue.prototype.EmitEvent=new Vue(); 左： <template> <div id="menuchild"> 我是左端的子组件 <!-- 非父子之间的传递数据 --> <button @click="sendmsg">传递数据</button>
Vue 快速入门
最新发布
分享我的点点滴滴，在成长路上与你同行！
06-30 1239
Vue 快速入门
VUE兄弟组件传值--事件车
Anitadu的博客
04-30 555
在面试的过程中，被问到了vue中兄弟组件传值是怎么进行的，因为技术不够只回答了效率很低的办法：子传父，父传子。自己上网查了下，发现大部分都是运用事件车的办法解决，创建中央事件总线。自己小小试着实现了下，这里做一个记录。 （1）首先创建一个js文件，里面只创建一个vue实例，作为eventbus。 （2）创建两个子组件，一个mytest，一个mytest2。 mytest里点击button实现m...
Vue事件车，非父子组件通讯$bus,$event,中央事件总线
陈新科的博客
09-08 795
一般项目不大就利用事件车，公共的Vue实例进行传递数据 一共有两种写事件车的方式，下面一一介绍 利用$emit发射自定义事件和$on监听自定义事件 $off销毁事件 一、第一种方式 （创建公共文件） src文件夹下建立公共文件 // 建立公共的js文件（事件车），主要用来传递信息 // 引入vue.js import Vue from 'vue'; // 创建空的vue实例 var event = new Vue(); export default event; hom...
vue3使用eventBus，模拟一个事件车
qq_43807473的博客
03-20 702
vue3使用事件车、vue3使用eventBus，其实原理和vue2一样都是将事件存入一个叫eventBus的对象使全局都能访问到这个对象的方法。vue3使用eventBus需要自己定义一个ts文件来模拟事件车，先创建一个ts文件。在页面中使用：按照自己的文件的位置引入。调用就跟vue2的一样了。
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
Vue 最常用不同组件传值
12-13
2. **兄弟组件传值**：兄弟组件间由于没有直接的父子关系，通常可以通过父组件作为中介来实现数据传递，或者借助Vue全局对象`$bus`进行事件的广播。 3. **跨级组件传值**：当需要跨越多级组件传递数据时，可以通过`...
VUE兄弟组件传值操作实例分析
10-16
为了实现兄弟组件间的数据传递，Vue.js中引入了事件总线(Event Bus)的概念，通过中央事件管理机制来间接实现数据的传递。 首先，我们来了解兄弟组件间传递数据的基本原理。在Vue.js中，兄弟组件无法直接通信，因为...
Vue2.0父子组件传递函数的教程详解
11-26
Vue.js 是什么 Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 学习笔记：在vue2.0中，父组件调用子组件时，想要将父组件中的函数体也做传递. 1. 通过props ：需要从子组件传参数到父组件时适用 // 父组件.vue <template> <div> <ok-input :param
vue - 组件间通信 之 中央事件总线bus
weixin_33904756的博客
05-13 183
中央事件总线- 就是一个名字可以叫做bus的vue空实例,里边没有任何内容； var bus = new Vue(); 人如其名，她就像一个公交车一样，来回输送人，将a站点的A输送到b站点，再将b站点的B输送到a站点； 这里a，b站点就像父、子组件，也像兄、弟组件，或者像两个没有任何亲戚关系的任何组件； 而A,B就像是各个组件内部要传输的数据或者要...
Vue的bus事件车方法
chabaimgg的博客
09-15 395
bus事件车两种写法。
vue事件车的原理与标准写法实现兄弟组件的传值
zxdznyy的博客
01-23 1160
在没有学习兄弟组件的传值时，兄弟组件之间传值可以借助它们共同的父组件：把值传给它们的父组件，再按需要取值（子传父，父再传子）。这样做十分麻烦，本节将提供更简单的做法——事件总线。Vue组件之间的数据共享详解如图，组件结构图如下。现在我们有一个需求，想要将D组件中的数据以参数的形式传递给A组件。怎么实现呢？利用以前的想法，我么可以让D组件先把数据传递给App组件，然后A组件再从App组件中获取数据。这个过程可以利用给组件设置自定义事件来实现。在这个过程中，App组件成了一个联络人。
vue的事件总线，事件公交（实现组件的传值）
weixin_45664217的博客
08-21 414
这里用StudentA 组件和StudentB 组件的传值为例 StudentA组件传值给StudentB 首先需要在入口文件main.js需要在vue的原型上面挂载bus Vue.prototype.bus = new Vue() 2.StudnetA 组件中的写法： this.$emit(‘hello’, 传的数据)触发需要传递到组件上面的hello事件 <template> <div class="studentA"> <h1>A同学的姓名和年.
WebGIS前端学习之路：Vue-Bus事件车实现组件间简单通信
weixin_52628862的博客
07-11 347
1、打开小黑窗，cd到项目文件夹下，输入下面的代码 二、引入插件 1、在main.js中引入并使用 1、在其中的一个组件添加button按钮，并绑定click事件，事件触发Vue-Bus发送信息，代码如下第一个参数是发送与接收的信号，要保持一致，第二个参数是发送的内容。 2、在另一个组件里面接收信息。首先在组件的created周期开始监视信号，在beforeDestroy周期关闭监听信号，代码如下 第一个参数与发送信号的组件保持一致，这样才可以接收到信息，第二个参数是触发的方法。接收到的
Vue--- 一点车项目
记得我所记得的
04-15 176
一点车项目 cli脚手架 + 组件化 +数据交互+路由指向+存入数据库 前端页面 cli脚手架的安装与搭建 创建对应包 页面组件化编辑（共享组件：摘取出来一模一样的组件重用）（私有组件:在自己的组件写入 引入共享组件） 数据交互 父子间传数据 父子传值 发送----------------------------------...
Vue事件总线（EventBus）使用详细介绍
热门推荐
i168wintop的博客
07-08 2万+
Vue事件总线（EventBus）使用详细介绍 前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue...
Vue3 ts 兄弟组件传值
10-31
在Vue 3中，如果你使用TypeScript (ts) 并且需要在兄弟组件之间传递数据，可以采用以下几种方法： 1. **props 和自定义事件**：这是最常用的父子组件通信方式。父亲组件通过`props`向孩子组件传递数据，而孩子组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值