vue 中兄弟组件的传值

最新推荐文章于 2025-11-13 12:19:08 发布
原创 最新推荐文章于 2025-11-13 12:19:08 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Vue项目中实现跨组件通信的方法——使用事件总线(event bus)。通过在main.js中创建一个全局的eventHub实例，并利用$emit和$on方法，实现了组件A向组件B传递数据的具体步骤。

1 在main.js中全局注册一个

data:{
  eventHub: new Vue()
}

2 在组件a里定义需要传的参数

self.$root.eventHub.$emit('add',{tabnum:tab.index,yuid:tab.$vnode.key,);

3 在组件b里取得需要接受的参数

self.$root.eventHub.$on('add',function(data) {
  self.tabnum = data.tabnum;
  self.yunid = data.yuid;
  }
})

小小红666
关注
vue兄弟组件间传值
weixin_44383184的博客
03-18 963
举例子说明，一个组件中是input，监听输入的内容，在另一个组件的div中显示出来； 首先在assets中创建个事件总线js文件eventBus.js，文件中的代码如下： import Vue from ‘Vue’; export default new Vue; 然后创建组件：inputComponent，导入eventBus，用input事件监听输入的内容，在这个监听事件中，使用emit发送输...
兄弟组件之间传值通过
weixin_48912846的博客
04-12 241
SubSon1 <div>汽车：{{car}} <button @click="carToSon2">传给Son2</button> </div> data() { return { car:{ type:"奔驰", price:"50W" } } }, methods: {
Vue.js中兄弟组件之间互相传值实例
12-29
兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。 实例上的$on方法来接受监听。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>组件传值</title> [removed][removed] </head> <body> ~~~~~~我是哥哥~~~~{{msg}}
Vue组件通信不再难！这8种方式让你彻底搞懂父子兄弟传值
最新发布
2401_86373285的博客
11-13 822
组件通信是Vue开发中的核心技能，掌握这些通信方式就像掌握了组件间的"对话语言"。从简单的props/$emit到复杂的Pinia状态管理，每种方式都有其独特的价值和适用场景。关键是要理解每种方式的原理和优缺点，在实际开发中根据组件关系、数据流复杂度、项目规模等因素做出合适的选择。你现在对Vue组件通信是不是有了更清晰的认识？在实际项目中，你最喜欢用哪种通信方式？有没有遇到过特别的通信难题？欢迎在评论区分享你的经验和心得！
vue.js 兄弟组件传值
weixin_30588827的博客
08-25 423
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数...
vue兄弟组件传值
yao_1063066968的博客
02-25 623
<template> <div v-title :data-title="title"> <div>car---兄弟组件传值</div> <div>下面显示的是brother1向brother2页面进行兄弟组件传值:</div> <brother1></brother1> <brother2></brother2> </div> <
Vue3 父子组件传值相互调用方法,兄弟组件传值相互调用方法
weixin_45638884的博客
04-11 1490
fill:#333;color:#333;color:#333;fill:none;父组件子组件1子组件2孙子组件孙子组件。
vue中兄弟组件传值
11-27
在Vue中，兄弟组件之间的传值可以通过共同的父组件作为中介来实现。具体实现方法如下： 1.在父组件中定义一个数据属性，用于存储需要传递的值。 2.在需要传值的兄弟组件中，通过$emit方法触发一个自定义事件，并将...
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
VUE兄弟组件传值操作实例分析
10-16
在Vue.js框架中，兄弟组件间的数据传递是一项常见的需求，尤其是在单页应用(SPA)中，组件之间的通信至关重要。兄弟组件指的是在组件树中处于同一层级的组件，它们不是父子关系，这使得直接的数据传递变得复杂。为了...
vue兄弟组件之间传值的两种办法
热门推荐
qq_40685103的博客
07-07 1万+
效果展示 第一种办法 通过事件总线bus传值 再main.js里首先声明 Vue.prototype.$bus=new Vue(); 父组件 <template> <div> <child1></child1> <child2></child2> </div> </template> <script> import child1 from './us
VUE 兄弟组件传值
Jana Jing的分享
02-24 6708
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
vue的兄弟组件传值
rock_23的博客
12-14 531
1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值 父组件： <template> <div> <ChildrentsA @close="clickhandler"/> <ChildrentsB :data="childrenData"/> </div> </template> <script> im
vue兄弟组件的传值
cp3___的博客
09-03 542
写这篇博客是自己在做vue的一些项目中发现，虽然你更多的是简单的一些父子组件的传值，但是很多场景是需要兄弟组件的传递的，之前不太懂，现在有学习这个vue兄弟组建的传值，来分享给大家 第一种传值方式 新建一个bus.js的文件 2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js child2组件通过调用$emit发送给child3 ...
VUE 兄弟之间的传值
weixin_44081699的博客
03-07 1081
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;组件通信&lt;/title&gt; &lt;style&gt; table { width:
Vue 兄弟组件传值
qq_52600282的博客
11-08 255
Vue 兄弟组件传值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值