vue实现兄弟组件间的实时通信

最新推荐文章于 2024-07-02 17:50:31 发布
最新推荐文章于 2024-07-02 17:50:31 发布
阅读量764 收藏 1
点赞数
分类专栏： 前端 vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43957211/article/details/115354999
版权
本文介绍如何在 Vue 中实现兄弟组件间的实时通信。通过在父组件中定义共享数据和方法，然后由一个子组件触发父组件的方法，更新数据，再由另一个子组件监听数据变化并获取新数据，从而实现数据的实时同步。
摘要由CSDN通过智能技术生成

vue实现兄弟组件间的实时通信

在毕设使用vue实现点击左侧树tree，右侧信息会随之改变。

我使用的tree和info属于不同组件

演示图：
在这里插入图片描述

在这里插入图片描述

实现Implementation

1.首先在父组件引入子组件tree和houseInfo,在data定义要通信的值(id)，再定义要调用的方法clickTree

2.tree组件调用父组件方法

3.响应组件监听父组件传过来值的变化，向后台请求数据

father.vue

<template>
  <el-row :gutter="20">
    <el-col :span="5"><div class="grid-content bg-purple " />
      <!--  树组件 -->
      <edit-tree :id="id" @clickTree="clickTree"/>
    </el-col>
最低0.47元/天 解锁文章
Zhou_run
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目笔记（17）-兄弟组件之间的联动
从零出发
08-15 2142
兄弟组件之间的联动 在本节中，我们将要实现点击右侧的Alphabet，左侧List组件可以移动到指定的位置，实现兄弟组件之间的通信，我们可以借助它们公共的父组件实现转发。具体步骤如下： 1、步骤一：兄弟组件1发送change，并传入参数e.target.innerText，而后需要在父组件City中监听该事件； // Alphabet组件 &lt;template&gt; &lt;ul...
Vue组件间数据同步刷新解决方案--全局事件总线
Ajucy的博客
04-17 3677
vue，跨组件间数据同步问题解决方案
Vue 组件通信：兄弟组件通信
最新发布
My_wife_QBL的博客
07-02 503
兄弟组件通信是指在 Vue 组件树中，没有直接父子关系的两个或多个组件之间的数据传递。由于兄弟组件之间没有直接的引用关系，因此需要通过一些中介机制来实现数据传递。
vue中兄弟组件之间的联动，兄弟组件之间的传值
热门推荐
zyz00000000的博客
12-05 2万+
兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作 方法1：借助父组件，让两个兄弟组件可以联动，子组件A将值传递给父组件，父组件再将值传递给子组件B 第一步：子组件A传值给父组件 通过$emit将e.target.innerText传递给父组件 <template> <div class="initail"> <ul> &l...
vue组件之间传值
qq_42238554的博客
04-01 860
1.兄弟组件传值 使用 $on(event,callback) 监听事件 使用 $emit(event, […args]) 触发事件 现有子组件a.vue,b.vue，它两是平级，现在要让a组件给b组件传值，a组件中的按钮点击，改变b组件中的值。 第一步：新建一个bus.js,并把该js分别引入到a,b组件中 //bus.js代码如下 import Vue from 'vue' const bus=new Vue(); export default bus 使用如下方法分别引入到a,b组件中： <s
小记2（父子组件通信，兄弟组件之间通信）
AnyTimeStrongKing的博客
03-26 226
父子组件之间的传值（props与$emit） <template :demo='demo' @emit='父组件要执行的事件'> 子组件接收数据是props，demo就是传值，子组件通过props接收这个值，props{demo：string} 子组件给父组件传值通过$emit(emit,参数) emit表示父组件绑定的事件名 thi...
Vue兄弟组件间通信
Tochanges的博客
03-04 508
Vue兄弟组件间的通信分为两种：一种是相邻兄弟组件(有相同的父组件)的通信；另一种是相隔多级(有共同的祖先及组件)的兄弟组件通信。 第一种兄弟通信，相当于父子组件通信和子父组件通信的结合(之前介绍过)，举一个简单例子：组件1和组件2是兄弟，组件2的按钮可以控制组件1中div的显示隐藏。 代码如下： <!DOCTYPE html> <html lang="en"> <h...
vue实现的组件兄弟间通信功能示例
10-17
Vue提供了多种方式来实现组件间的通信，包括父子组件通信、孙子组件通信以及兄弟组件通信。本篇文章主要探讨的是Vue中兄弟组件间通信的实现方法。 首先，我们要明白在Vue中，组件之间默认是不能直接访问彼此的状态...
Vue实现兄弟组件间的联动效果
10-15
在Vue.js框架中，组件间通信是常见的需求，特别是兄弟组件间的联动，这涉及到数据的传递和事件的监听。在本篇文章中，我们将探讨如何在Vue中实现兄弟组件间的联动效果，具体步骤如下： 首先，我们需要理解Vue组件间...
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
01-19
本文实例讲述了vue实现父子组件之间的...www.jb51.net vue父子组件通信、兄弟组件通信</title> <style> *{ margin: 0; padding: 0; list-style: none; } table{ text-align: center; margin:0 aut
vue 解决兄弟组件、跨组件深层次的通信操作
10-15
这是最基础的兄弟组件通信方式。子组件1通过调用`$emit`方法触发一个事件，将信息传递给父组件。然后，父组件接收到这个事件后，再通过调用子组件2的方法或属性来传递信息。例如，子组件1触发`fromFirst`事件，父...
Vue兄弟组件之间的通信：
YY的博客
11-25 3462
Vue兄弟组件之间的通信：
Vue 兄弟组件之间的通信
轻风细雨_林木木
01-13 8136
Vue 兄弟组件之间的通信 参考：https://blog.csdn.net/weixin_39763493/article/details/107182252 1. Vue中实现兄弟组件的通讯一般为2种方式： 一种方法是让父组件允当两个子组件之间的中间件（中继）； 另一种就是使用EventBus（事件总线），它允许两个子组件之间直接通讯，而不需要涉及父组件。 由于中继方式比较简单，这里不做赘述，只讲EventBus方式。 2. EventBus具体实现 首先在main.js文件中定义一个新的bu
Vue 3 第十一章：组件二（组件通信）
to_the_Future的博客
04-19 3417
组件通信是 Vue 中非常重要的一个概念，它指的是组件之间传递数据和事件的过程。在 Vue 中，组件通信主要分为父子组件之间的通信和兄弟组件之间的通信两种情况。在父子组件之间的通信中，父组件可以通过v-bind来向子组件传递数据，而子组件则可以通过来接收父组件传递的数据。同时，子组件也可以通过emit触发自定义事件来向父组件传递数据。在兄弟组件之间的通信中，可以通过一个共同的父组件来实现数据的传递和事件的触发，也可以通过 Vuex 等状态管理工具来实现数据的共享。
Vue组件的通信---兄弟组件间的通信
m0_62763606的博客
07-01 1161
假定有A、B两个组件要进行通信，组件A向组件B发送数据，则要将A组件中的数据通过emit方法发射出去并由父组件接收，而后被父组件再通过自定义属性的方法完成向B组件数据传输。组件B向组件A发送数据的方法相同。前两部分主要讲的是组件嵌套时其间的通信问题，组件之间除去嵌套，并列也极为常见。解决这类组件的通信问题，在这里学习两种方法：1、使用父组件作为兄弟组件通信的中转点；其方法是通过新建的bus实例来使用emit方法发射数据，目标组件接收数据需要在mounted钩子函数内部使用bus实例的on方法完成。
vue中使用兄弟组件通信
weixin_45160383的博客
08-18 488
template > < div > < button @click = "sendMessage" > 发送消息 < / button > < / div > < / template > < script > import bus from './eventBus' export default {data() {return {
vue组件间通信六种方式（总结篇）
sinat_40572875的博客
11-10 1458
而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
VUE 父子组件、兄弟组件 之间通信 最强详解
不想成为可以改变世界的程序员，不是一个好程序员
05-31 7614
简单 总结： 1.1 通过 ref 调用/获取 子组件内参数/方法 实现：就是在 你想要访问的组件上 通过 ref 注册引用信息，然后依靠 this.$refs 调用 组件内的方法以及参数。 2.1 通过emit 调用 父组件方法 实现：将 要在子组件中想调用的父组件方法，通过【@】配置至组件上，然后通过this.$emit()来调用。 2.2 通过 props 调用 父组件方法/参数 实现：将 要在子组件中想调用的父组件方法/父组件参数，通过 【:】配置至组件上，接着在子组件的prop .....
vue3兄弟组件间通信
09-07
在Vue3中，实现兄弟组件间通信的方法可以通过以下几种方式: 1. 使用事件总线：可以使用Vue3的新特性provide和inject来创建全局事件总线，使得兄弟组件能够进行通信。父组件通过provide提供数据或方法，然后在子组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值