【Vue简易入门】兄弟组件传值

最新推荐文章于 2023-02-24 14:27:26 发布
最新推荐文章于 2023-02-24 14:27:26 发布
阅读量4k 收藏 4
点赞数 2
分类专栏： Vue简易入门 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41421986/article/details/108021166
版权
本文介绍如何在Vue中使用EventBus实现在没有直接父子关系的兄弟组件之间传递值。通过创建eventBus.js作为事件总线，以及在TodoList和FinishList组件中分别调用$emit和on方法来完成事件监听和触发。
摘要由CSDN通过智能技术生成

上次讲到了父子组件传值，这次讲下Vue中用eventBus实现兄弟组件传值。兄弟组件出现的情况通常是父组件下有多个子组件，子组件相互要传递值。这里用的自己写的一个Todo List例子，在menu页下todoList组件点击完成事项后传递到finishList组件。

1. 创建eventBus.js

eventBus作为一个中央事件总线，用于监听todoList抛出的事件，并出发finishList的接收事件。

import Vue from 'vue'
export default new Vue()

2. 在兄弟组件中引用eventBus，并加入$emit和on方法

TodoList：在methods中用$emit发送传递值。

最低0.47元/天 解锁文章
JeffreytheCoder
关注
专栏目录
vue兄弟组件间传值
weixin_44383184的博客
03-18 892
举例子说明，一个组件中是input，监听输入的内容，在另一个组件的div中显示出来； 首先在assets中创建个事件总线js文件eventBus.js，文件中的代码如下： import Vue from ‘Vue’; export default new Vue; 然后创建组件：inputComponent，导入eventBus，用input事件监听输入的内容，在这个监听事件中，使用emit发送输...
VUE3.0组件兄弟之间传值
moonas520的博客
04-28 931
用vue3基础语法操作 引入vue <script src="https://unpkg.com/vue@next"></script> 页面渲染代码 <div id="app"></div> 根组件 <template id="root"> <div> form-table与list-table都是子组件的名字，把子组件放在根组件中渲染显示 <form-tab...
vue.js 兄弟组件传值
weixin_30588827的博客
08-25 357
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数...
VUE 兄弟组件传值
Jana Jing的分享
02-24 6632
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 475
1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值 父组件： <template> <div> <ChildrentsA @close="clickhandler"/> <ChildrentsB :data="childrenData"/> </div> </template> <script> im
vue兄弟组件传值
yao_1063066968的博客
02-25 545
<template> <div v-title :data-title="title"> <div>car---兄弟组件传值</div> <div>下面显示的是brother1向brother2页面进行兄弟组件传值:</div> <brother1></brother1> <brother2></brother2> </div> <
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
Vue 最常用不同组件传值
12-13
2. **兄弟组件传值**：兄弟组件间由于没有直接的父子关系，通常可以通过父组件作为中介来实现数据传递，或者借助Vue全局对象`$bus`进行事件的广播。 3. **跨级组件传值**：当需要跨越多级组件传递数据时，可以通过`...
VUE兄弟组件传值操作实例分析
10-16
在Vue.js框架中，兄弟组件间的数据传递是一项常见的需求，尤其是在单页应用(SPA)中，组件之间的通信至关重要。兄弟组件指的是在组件树中处于同一层级的组件，它们不是父子关系，这使得直接的数据传递变得复杂。为了...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
Vue.js 是一款流行的前端框架，它的核心特性之一是组件化，而组件间的通信是构建复杂应用的关键。在Vue中，有多种方式实现组件之间的数据传递，主要包括父子组件间通信和非父子组件间通信。 **一、父子组件传值** ...
vue兄弟组件的传值
cp3___的博客
09-03 490
写这篇博客是自己在做vue的一些项目中发现，虽然你更多的是简单的一些父子组件的传值，但是很多场景是需要兄弟组件的传递的，之前不太懂，现在有学习这个vue兄弟组建的传值，来分享给大家 第一种传值方式 新建一个bus.js的文件 2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js child2组件通过调用$emit发送给child3 ...
Vue组件传值——兄弟组件传值
热门推荐
jyn15159的博客
10-10 1万+
兄弟组件传值 兄弟组件之间彼此没有联系，它们需要通过中间Vue实例对象bus(快递员)进行数据传递。 1. 声明事件 给组件实例(或Vue实例) 声明事件有两种方式： 直接声明 通过$on实现 给组件实例声明事件： <组件 @事件名称="事件驱动方法"></组件> 通过$on进行声明： // 语法： 组件实例.$on(事件名称，事件驱动方法(形参，形参){}) // 例如： // 声明事件 vm.$on('hello',function(traffic,city){con
vue 中兄弟组件的传值
gepppppppp的博客
04-23 1694
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) { ...
Vue第 25 篇，Vue兄弟组件传值，Vue兄弟组件通讯的两种方式，详细过程（vue同级别组件传值通讯，vue兄弟组件通讯传值常用）
weixin_65793170的博客
01-02 7180
⭐在 Vue.js 中，兄弟组件间的通信并不是像父组件到子组件那样直接，因为它们之间并没有直接的父子关系。不过，Vue 提供了几种机制，来实现兄弟组件之间的数据共享和通信。兄弟组件，就是同级别的组件
兄弟组件传值
qq_57826511的博客
05-15 273
兄弟组件传值
兄弟组件传值（草稿）
from_shanghai的博客
08-17 171
<!-- vue兄弟组件 间传值 借助中央事件总线 1：在外部 建一个Bus.js，放在 assets文件夹下 Bus.js: import Vue from 'Vue'; //平常写 都是 import Vue from 'vue' export default new Vue; //创建 空的Bus 组件 //vue-music App.vue 是 export default ...
vue中兄弟组件传值
茂茂的博客
02-23 231
vue中兄弟组件传值
Vue 兄弟组件传值
qq_52600282的博客
11-08 208
Vue 兄弟组件传值
vue3怎么兄弟组件传值
最新发布
12-05
Vue3中兄弟组件传值有多种方法，其中两种常用的方法如下： 1.使用事件总线（Event Bus）进行传值，具体步骤如下： 在父组件中创建一个事件总线实例，并在需要传值的地方触发事件，将数据作为参数传递给事件；在子组件中监听该事件，并在回调函数中获取传递的数据。示例代码如下： // 父组件 <template> <div> <h1>我是父组件</h1> <button @click="sendMsg">发送消息给子组件</button> </div> </template> <script> import { ref } from 'vue' import mitt from 'mitt' export default { setup() { const emitter = mitt() const msg = ref('父组件的消息') const sendMsg = () => { emitter.emit('getMsg', msg.value) } return { emitter, sendMsg } } } </script> // 子组件 <template> <div> <h1>我是子组件</h1> <p>{{ msg }}</p> </div> </template> <script> import { ref, onMounted } from 'vue' import mitt from 'mitt' export default { setup() { const emitter = mitt() const msg = ref('') onMounted(() => { emitter.on('getMsg', (data) => { msg.value = data }) }) return { emitter, msg } } } </script> 2.使用插件mitt进行传值，具体步骤如下： 在父组件和子组件中都引入mitt插件，并在父组件中创建一个mitt实例，然后在需要传值的地方调用emit方法，将数据作为参数传递给子组件；在子组件中通过props接收父组件传递的数据。示例代码如下： // 父组件 <template> <div> <h1>我是父组件</h1> <button @click="sendMsg">发送消息给子组件</button> </div> </template> <script> import { ref } from 'vue' import mitt from 'mitt' export default { setup() { const emitter = mitt() const msg = ref('父组件的消息') const sendMsg = () => { emitter.emit('getMsg', msg.value) } return { emitter, sendMsg } } } </script> // 子组件 <template> <div> <h1>我是子组件</h1> <p>{{ msg }}</p> </div> </template> <script> import { ref, onMounted, reactive } from 'vue' import mitt from 'mitt' export default { props: { msg: { type: String, default: '' } }, setup(props) { const emitter = mitt() onMounted(() => { emitter.on('getMsg', (data) => { props.msg = data }) }) return { emitter } } } </script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值