Vue兄弟组件间通信

最新推荐文章于 2024-04-25 10:48:28 发布
最新推荐文章于 2024-04-25 10:48:28 发布
阅读量489 收藏 1
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tochanges/article/details/104663187
版权

Vue兄弟组件间的通信分为两种：一种是相邻兄弟组件(有相同的父组件)的通信；另一种是相隔多级(有共同的祖先及组件)的兄弟组件通信。

第一种兄弟通信，相当于父子组件通信和子父组件通信的结合(之前介绍过)，举一个简单例子：组件1和组件2是兄弟，组件2的按钮可以控制组件1中div的显示隐藏。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业</title>
  <script src='../vue.js'></script>
  <style>
   .test{
     width: 100px;
     height: 100px;
     background: red;
   }
  </style>
</head>
<body>
  <div id='app1'>  
    <!-- 将父亲的数据通过自定义属性传给组件1使用 -->
    <son1 :show='state'></son1>
    <hr>  
     <!-- 将父亲的方法通过自定义事件传给组件2使用 -->
    <son2 @custom='faToggle'></son2>
  </div>
  <hr>
  <!-- 组件1 -->
  <temp
最低0.47元/天 解锁文章
Tochanges
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现的组件兄弟间通信功能示例
10-17
Vue提供了多种方式来实现组件间的通信，包括父子组件通信、孙子组件通信以及兄弟组件通信。本篇文章主要探讨的是Vue中兄弟组件间通信的实现方法。 首先，我们要明白在Vue中，组件之间默认是不能直接访问彼此的状态...
Vue兄弟组件之间的通信：
YY的博客
11-25 3454
Vue兄弟组件之间的通信：
Vue 兄弟组件之间的通信
轻风细雨_林木木
01-13 8112
Vue 兄弟组件之间的通信 参考：https://blog.csdn.net/weixin_39763493/article/details/107182252 1. Vue中实现兄弟组件的通讯一般为2种方式： 一种方法是让父组件允当两个子组件之间的中间件（中继）； 另一种就是使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及父组件。 由于中继方式比较简单，这里不做赘述，只讲EventBus方式。 2. EventBus具体实现 首先在main.js文件中定义一个新的bu
前端｜Vue Vue3 超详细 实现组件通信: 父子、子父及兄弟组件间的数据流转
最新发布
weixin_47192158的博客
04-25 7135
Vue 3 提供了多种组件间通信的方式，这些方式满足了从简单父子通信到复杂全局状态管理的各种需求。props和自定义事件依旧是父子组件通信的首选方式，provide和inject提供了一种新的兄弟组件通信方法，而 Vuex 依旧是管理大型应用状态的强大工具。理解这些通信机制的适用场景和限制，将帮助你构建更加可维护和高效的 Vue 应用。
Vue 3 第十一章：组件二（组件通信）
to_the_Future的博客
04-19 3285
组件通信是 Vue 中非常重要的一个概念，它指的是组件之间传递数据和事件的过程。在 Vue 中，组件通信主要分为父子组件之间的通信和兄弟组件之间的通信两种情况。在父子组件之间的通信中，父组件可以通过v-bind来向子组件传递数据，而子组件则可以通过来接收父组件传递的数据。同时，子组件也可以通过emit触发自定义事件来向父组件传递数据。在兄弟组件之间的通信中，可以通过一个共同的父组件来实现数据的传递和事件的触发，也可以通过 Vuex 等状态管理工具来实现数据的共享。
vue中使用兄弟组件通信
weixin_45160383的博客
08-18 460
template > < div > < button @click = "sendMessage" > 发送消息 < / button > < / div > < / template > < script > import bus from './eventBus' export default {data() {return {
Vue组件的通信---兄弟组件间的通信
m0_62763606的博客
07-01 1147
假定有A、B两个组件要进行通信，组件A向组件B发送数据，则要将A组件中的数据通过emit方法发射出去并由父组件接收，而后被父组件再通过自定义属性的方法完成向B组件数据传输。组件B向组件A发送数据的方法相同。前两部分主要讲的是组件嵌套时其间的通信问题，组件之间除去嵌套，并列也极为常见。解决这类组件的通信问题，在这里学习两种方法：1、使用父组件作为兄弟组件通信的中转点；其方法是通过新建的bus实例来使用emit方法发射数据，目标组件接收数据需要在mounted钩子函数内部使用bus实例的on方法完成。
vue综合组件间的通信详解
01-21
核心代码：兄弟组件间通信 步骤1：var bus = new Vue() 步骤2：在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3：触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素 渲染在todoitem...
Vue 兄弟组件通信的方法（不使用Vuex）
08-29
Vue 兄弟组件通信的方法（不使用Vuex） 本文主要介绍了Vue 兄弟组件通信的方法，主要思想是使用自定义事件实现父子组件之间的通信。下面详细介绍该方法。 首先，在子组件中，我们可以使用 `$emit` 方法触发一个...
vue组件间通信解析
12-29
组件间通信（父子，兄弟） 相关链接\组件通信：点击查看 学习链接：Vue.js——60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法（一） 属性传递 props //子组件 ...
vue组件间通信六种方式（总结篇）
sinat_40572875的博客
11-10 1441
而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
VUE 父子组件、兄弟组件 之间通信 最强详解
不想成为可以改变世界的程序员，不是一个好程序员
05-31 7503
简单 总结： 1.1 通过 ref 调用/获取 子组件内参数/方法 实现：就是在 你想要访问的组件上 通过 ref 注册引用信息，然后依靠 this.$refs 调用 组件内的方法以及参数。 2.1 通过emit 调用 父组件方法 实现：将 要在子组件中想调用的父组件方法，通过【@】配置至组件上，然后通过this.$emit()来调用。 2.2 通过 props 调用 父组件方法/参数 实现：将 要在子组件中想调用的父组件方法/父组件参数，通过 【:】配置至组件上，接着在子组件的prop .....
Vue 兄弟组件通信
weixin_63681863的博客
01-18 742
使用共享状态（Shared State）：创建一个共享的数据仓库（store），可以使用 Vuex 或者 Vue 3 的新特性 Composition API 中的。使用事件总线（Event Bus）：创建一个全局的事件中心，在其中定义事件和相应的回调函数。兄弟组件通过事件中心进行通信，一个组件触发事件，另一个组件监听并响应事件。使用第三方库：除了上述的 Vue 3 内置方法外，还可以使用第三方库来实现兄弟组件之间的通信。属性可以直接访问父组件实例，通过访问父组件的属性或调用父组件的方法来实现通信。
【vue3】vue3组件通信方式
韩旭不会敲代码吧的博客
06-14 2403
vue3组件通信方式
Vue兄弟组件通讯
04-20 351
初级开发的面试中经常会被问到Vue的组件通讯方法，除了父传子的props、子传父的emit，Vue也支持兄弟组件之间通讯。
Vue---兄弟组件通信（三种方式） vue bus
热门推荐
web修理工
07-15 1万+
第一种：eventBus 新建一个js文件， 我这里叫做 bus.js； 文件内容： import Vue from 'vue'; export default new Vue(); 然后在你需要触发的 组件中引入 import bus from ‘文件路径’ 执行：bus.$emit('触发名称', 传输的数据 ) 最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下： bus.$on('触发名称', res => { /
Vue 组件间通信方式
珍妮的小罐君
05-31 295
前言 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如p...
Vue组件通信---父子组件通信、兄弟组件通信、跨层级组件通信
weixin_41549971的博客
08-14 309
组件通信（父子，兄弟，跨层），全局事件总线，消息订阅与发布
vue3兄弟组件间通信
09-07
在Vue3中，实现兄弟组件间通信的方法可以通过以下几种方式: 1. 使用事件总线：可以使用Vue3的新特性provide和inject来创建全局事件总线，使得兄弟组件能够进行通信。父组件通过provide提供数据或方法，然后在子组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值