Vue 兄弟组件通信（不使用Vuex）

最新推荐文章于 2024-04-25 10:48:28 发布
最新推荐文章于 2024-04-25 10:48:28 发布
阅读量2.2k 收藏
点赞数
分类专栏： front-end-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38465623/article/details/82792326
版权

方法一、建立bus中间机制，兄弟组件$emit 和$on进行通信

方法二、子传父，然后父传子。

其实两种方法原理相似。

 

我采用了方法二。

a组件中触发父组件b的isRepotags事件传递res.data[0].repotags

 

 

 

父组件b中分别为两个子组件中添加通信标识

 

在a组件中绑定isRepotags事件，向c组件repo传值

 

 

 

 

 

c组件获取父组件b传来的isRepo的值

 

飞鸿酱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
Vue 兄弟组件通信的方法（不使用Vuex） 本文主要介绍了Vue 兄弟组件通信的方法，主要思想是使用自定义事件实现父子组件之间的通信。下面详细介绍该方法。 首先，在子组件中，我们可以使用 `$emit` 方法触发一个...
vue组件间通信的13种方式
longfan_的博客
06-16 1万+
vue组件间通信的13种方式
超详细的vue组件之间通讯的8种方式
weixin_70134200的博客
07-11 5672
想要深入了解 vue 组件之间的通讯，这一篇文章足矣，里面详细讲解了组织之间通讯的8种方式，一篇文章即可掌握组件通讯。
前端｜Vue Vue3 超详细 实现组件通信: 父子、子父及兄弟组件间的数据流转
最新发布
weixin_47192158的博客
04-25 7379
Vue 3 提供了多种组件间通信的方式，这些方式满足了从简单父子通信到复杂全局状态管理的各种需求。props和自定义事件依旧是父子组件通信的首选方式，provide和inject提供了一种新的兄弟组件通信方法，而 Vuex 依旧是管理大型应用状态的强大工具。理解这些通信机制的适用场景和限制，将帮助你构建更加可维护和高效的 Vue 应用。
vue 组件之间的通信
青蛙king的博客
08-14 4213
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
超详细 vue组件通信的10种方式
鹏多多的博客
02-08 5857
vue：超级详细，项目常用的十种组件通信方式
vue的组件通信方法(9种)
qq_66552805的博客
10-19 1152
主要是祖孙之间传值 父组件下面有子组件a 子组件a下面又有 子组件b 在父组件里还是用自定义属性和自定义事件传 在子组件a下面绑定v-bind="$attrs" v-on="$listeners" 在子组件b下面通过$attrs 拿数据 通过 $emit 调用方法。⼦组件通过this.$emit("⾃定义的事件的名字",要传给⽗组件的数据), ⽗组件通过⼦组件的标签监听⾃定义的时间,最后在父组件接收使用就可以了 子传父的使用场景：在子组件中有删除等方法的时候要在子组件把下标传到父组件操作数据。
如何使用vuex实现兄弟组件通信
12-29
使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的数据都存放进去，每个子组件都从vuex里获取数据，其实就是一句话——把vuex作为一个桥 2. 具体代码 父组件App....
Vue组件间通信-Vuex
10-16
主要介绍了Vue组件间通信-Vuex,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中的组件通信
TeFuir__Lv的博客
12-08 1194
vue中的组件通信
Vue实现组件间通信的11种方式
xxx
06-29 2147
组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中，不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等，以实现组件之间的协调和交互。: useAttrs是 Vue 3 中提供的一个 Composition API，用于获取组件上未声明为props的属性。这些通信方式可以根据应用程序的需求和复杂性进行选择和组合使用，以实现组件之间的有效通信和协作。原文合集地址如下，有需要的朋友可以关注。
Vue组件间多种通信方式（超详细）
qq_65089414的博客
04-12 1740
除了通过props进行父子组件之间的通信，Vue还提供了一种更加灵活的组件间通信方式，即自定义事件。通过自定义事件，可以让子组件向父组件发送消息，也可以让任意两个组件之间进行通信。自定义事件的实现依赖于Vue实例中的事件系统，即$emit和$on方法。在子组件中，使用$emit方法触发一个自定义事件，并传递需要传递的数据。在父组件中，使用$on方法监听这个自定义事件，并在回调函数中获取传递的数据。代码示例：
【VUE】组件通信方式大总结
ColdCoder的博客
03-09 809
文章目录组件通信总览一 props-$emit1. 用法2. 优点3. 缺点4. 应用场景二 `this.$children`&`this.$parent`1 用法2 优点3 缺点4 应用场景三 provide & inject1 用法2 优点3 缺点4 应用场景四 vuex1 用法2 优点3 缺点4 应用场景五 事件总线事件总线——EventBus1 用法2 优点3 缺点4 应用场景事件总线——new Vue1 用法2 优点3 缺点4 应用场景六、`$attrs` & `$list
VUE组件间通信的七种方式
宝子的博客
11-04 1671
根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信。
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue组件通信的五种方法
IOTbaqi的博客
10-11 1504
前言 我们通常会把整个页面被分成小组件，这些组件有自己的功能和 UI。 有时，我们需要一种方法来在这些组件之间进行通信。 我们可以使用 Vuex（状态管理工具）来存储数据并跨组件使用。 但有时，我们需要一种方法将数据从一个组件发送到另一个组件，而无需使用 Vuex 存储。 请看下面 共有五种方法可以进行通信 1、使用Props (父组件通信子组件) 2、使用Events 事件(子组件通信父组件) 3、使用Event Bus 事件总线(父通信子，子通信父) 4、使用provide/inject 提供和注
vue组件间的通讯的10种方法
Serena_tz的博客
05-09 5497
1.props/$emit props主要用于父组件传递数据给子组件，父==>子。 Vue自定义事件 父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件 仅仅用于父子组件传递，不适用于 三层及其以上 2. $emit/$on 这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当
Vue 兄弟组件通信
weixin_63681863的博客
01-18 666
使用共享状态（Shared State）：创建一个共享的数据仓库（store），可以使用 Vuex 或者 Vue 3 的新特性 Composition API 中的。使用事件总线（Event Bus）：创建一个全局的事件中心，在其中定义事件和相应的回调函数。兄弟组件通过事件中心进行通信，一个组件触发事件，另一个组件监听并响应事件。使用第三方库：除了上述的 Vue 3 内置方法外，还可以使用第三方库来实现兄弟组件之间的通信。属性可以直接访问父组件实例，通过访问父组件的属性或调用父组件的方法来实现通信。
Vue组件间通信的几种方式
DZQ1223的博客
06-27 956
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子组件通信；兄弟组件通信；跨级组件通信根据以上对这7种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
vue3 兄弟组件通信 不用vuex
09-07
Vue3中的兄弟组件通信可以使用事件总线(Event Bus)或者provide/inject来实现，而不一定需要使用Vuex。 事件总线是一个Vue实例，在App.vue或者根组件中创建一个新的Vue实例，然后通过`$emit()`方法触发自定义事件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值