兄弟组件传值（学习笔记）

最新推荐文章于 2024-06-05 17:51:25 发布
最新推荐文章于 2024-06-05 17:51:25 发布
阅读量519 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： js vue
原文链接：https://www.cnblogs.com/zmyxixihaha/p/11340450.html

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。

1、子传父，父传子

2、vuex

3、eventBus

接下来介绍如何使用eventBus实现兄弟组件传值

首先我的需求是这样的，页面上由top，left，main，bottom四个组件构成。需要将top中的值传到left中。

 

A???cium
关注
react笔记之学习之props父子传值
geyaoisnice的博客
11-27 214
前端
Vue 25 ，⭐Vue2兄弟组件传值，Vue2兄弟组件通讯的两种方式，详细过程（ Vue2同级别组件传值通讯，Vue2兄弟组件通讯传值常用 ）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
01-02 9137
⭐在 Vue.JS 中，兄弟组件之间的通信由于缺乏直接的父子关系而变得相对复杂。然而，Vue提供了多种机制来实现这种同级组件间的有效数据共享与通信。Vue2常见的方法包括使用事件总线（Event Bus）或 Vuex 状态管理库，这些方案能够帮助我们轻松地在没有直接关联的组件之间传递信息和状态，确保应用逻辑的一致性和可维护性。兄弟组件，就是同级别的组件。
vue兄弟组件传值的两种方式
小柠檬爱编程
06-30 3338
本demo主要是为了演示vue项目中兄弟组件之间的传值，这里我演示了两种方式： a. bus总线传值； b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件，父组件再传子组 件B) 下边开始本次demo的编写： 一. bus总线传值的使用： 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单，就是暴露一个vue实例而已。 有人喜欢在main.js全局引入该js文件，我一般在需要使用到组件中引入。 创建相关组件： 父组件中注册并使用子组件： 分别在子组件one和two中
兄弟组件的传值
qq_38980678的博客
03-07 2861
兄弟组件 - 传值 非父子组件，就是兄弟组件，兄弟组件之间并无任何关系，如果需要传值，需要借助中间方，如： 租客 > 中介 > 房东 使用 中央事件总线 ，其实就是一个新的vue实例传值 const bus = new Vue(); 接收数据的一方，通过$on 先监听自定义事件，并接收值 发送数据的一方，通过$emit触发事件，并传值 总结： - bus.$emit() 触发事件：发 - bus.$on() 绑定事件：收 兄弟组件的数据传输： 准备好要传递的数据 定
兄弟组件传值
qq_42430038的博客
03-26 1297
1、main.js // 通过事件总线bus传值 Vue.prototype.$bus = new Vue() 2.要传值的子组件的传值方法中： this.$bus.$emit('toCurrentLocation', obj) // $emit用来传值，第一个参数是传值的方法名，第二个参数是要传的参数 3.要接收值的子组件中： $on用来接收兄弟组件的值，第一个参数是接受值的方法名，与传值的方法名相同，第二个参数是个方法，value就是接收到的值， data() { retur.
Vue组件间通信方法大全（适用父子，兄弟，子孙组件传值 六大类）-- 学习笔记
simper_boy的博客
09-02 1307
最近在掘金看了一篇 30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度） 然后发现里面总结了Vue中组件间传值的多种方式（不详细），不知道你们会不会和笔者一样，还是停留在之前的几种方式（props/ $emit，$emit/$on，vuex）。上面的文章提到了新的方式，下面笔者会详细解释，给出示例。 1、props（父组件传给子组件） 新建父组件father.vue ...
web学习笔记（六十二）
最新发布
shan33__的博客
06-05 586
（1）在集成终端输入： npm i --save pubsub-js来安装pubsub-js包，这是一个专门用来完成发布订阅操作的包，这个包是通用的，Vue、小程序、react、js都可以用。但是通常我们需要点击指定键然后触发相应的事件，此时就需要用到键盘的修饰符了, 也可以链式调用修饰符，表示同时按下对应的键触发键盘事件。组件树传值也叫依赖注入，可用解决父组件向某个深层子组件传值的问题，但是一定要注意，这个只能实现父传子的单向传递。是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
OpenHarmony学习笔记-基础篇1
duanzhe的博客
03-27 1073
onPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。：当用户点击返回按钮时触发。：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
高仿饿了么/vue2.0学习笔记
10-02
### 高仿饿了么/vue2.0学习笔记 #### Vue2.0核心知识点与实践技巧 **一、概述** 本文档旨在分享“高仿饿了么”项目的Vue2.0学习过程中的经验和技巧，特别关注于那些在使用Vue1.0教程时遇到的问题以及解决方案。...
Vue中兄弟组件之间传值
jq2588的博客
02-23 872
在中，我们在使用不同组件的时候，组件之间可能会需要相互传值。以下有三种兄弟组件之间传值的方法。// 这里我让Older组件向younger组件传值// 父组件divOlder:msg-olderchange"change"
Vue的兄弟组件传值
weixin_45439010的博客
04-24 133
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> </style> </
Vue.JS中兄弟组件传值
m0_57417006的博客
12-10 493
Vuex 是Vue.js的官方状态管理库，允许你在整个应用的任何地方共享状态。通过在Vuex中存储数据，兄弟组件都可以访问和修改这些共享的状态。你可以使用Vue的实例作为事件总线，兄弟组件通过事件的方式进行通信。一个组件触发事件，而另一个组件监听并响应这些事件。在Vue.js中，兄弟组件之间的数据传递通常需要通过父组件作为中介。兄弟组件通过共同的父组件来传递数据。父组件接收一个子组件的数据，并将其作为。触发将数据发送给父组件。父组件接收到数据后，通过。，从而完成兄弟组件之间的数据传递。传递给另一个子组件。
vue兄弟组件的传值
cp3___的博客
09-03 525
写这篇博客是自己在做vue的一些项目中发现，虽然你更多的是简单的一些父子组件的传值，但是很多场景是需要兄弟组件的传递的，之前不太懂，现在有学习这个vue兄弟组建的传值，来分享给大家 第一种传值方式 新建一个bus.js的文件 2.新建两个兄弟组件child2,child3,需要在每一个兄弟组件里面引入bus.js child2组件通过调用$emit发送给child3 ...
vue兄弟组件传值
dopudou123456的博客
05-24 196
main.js const bus=newVue()//创建vue的实例对象Vue.prototype.bus = new Vue() // 创建vue的实例对象 Vue.prototype.bus=newVue()//创建vue的实例对象Vue.prototype.bus = $bus; // 挂在类的原型上 子组件1（发送数据） <button @click=“transitional()”>向兄弟传值 子组件2（接收数据） 接收兄弟传值:{{mssage}}
vue的兄弟组件传值
rock_23的博客
12-14 500
1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值 父组件： <template> <div> <ChildrentsA @close="clickhandler"/> <ChildrentsB :data="childrenData"/> </div> </template> <script> im
VUE 兄弟组件传值
Jana Jing的分享
02-24 6679
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
全面掌握Linux系统，兄弟连教程1-16章学习笔记
“兄弟连Linux教程1-16章学习笔记（全）”是针对Linux初学者和希望快速掌握Linux基本知识和技能的学习者而准备的学习资料。这份学习笔记涵盖了Linux基础知识、基本命令的使用、系统管理、网络配置、Shell编程等方面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值