兄弟组件之间如何实现数据联动，刷新界面

最新推荐文章于 2025-07-01 15:26:59 发布
原创 最新推荐文章于 2025-07-01 15:26:59 发布 · 1.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文详细介绍了如何在Vue等前端框架中，利用watch方法解决兄弟组件间的联动问题，通过id作为纽带，将值从子组件传递至父组件，并监控其变化以触发相应效果。

在我们做程序的时候有时会遇到这样一个问题，在兄弟组件之间发生有一个联动效果的时候我们会如何
方法很多我是用的一个watch方法
1.先是传值，先拿到在兄弟组件中要联动的那个值，就好比一个纽带一样，我当时用的是id,因为这个id，用到地方好多，所以我先传到了他的父组件中，之后再在兄弟组件中调用父组件里的值，监听id变化
(1)这是子组件要传出的值
在这里插入图片描述
（2）这是传到父组件的值
在这里插入图片描述
在这里插入图片描述
（3）其兄弟组件获取父组件里的值
在这里插入图片描述
（4）这是兄弟组件中监视的值
在这里插入图片描述
2.方法可能有点啰嗦，但也是最好理解的，对于初学者可能很有帮助，勿喷

002 学习鸿蒙应用开发ArkTs语言
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
元服务，原子化服务
坚果的博客
05-24 6130
对于用户而言，原子化服务是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口的(用户可通过点击、碰一碰、扫一扫等方式直接触发)、免安装的(无需显式安装，由系统程序框架后台安装后即可使用)、可为用户提供一个或多个便捷服务的用户程序形态。服务卡片是原子化服务和 FA 的一种界面展示形式，与传统应用不同，原子化服务在设备桌面没有应用图标，它将原子化服务或 FA 的重要信息或操作前置到卡片，用户点击服务卡片，即可进入原子化服务的服务界面，以达到服务直达，减少体验层级的目的。
Vue页面刷新方法(子组件改变数据后兄弟组件刷新，不闪烁)
QDzzzhy
06-12 1万+
问题描述 今天在做个人博客的时候遇到了这样一个问题，一个文章详情页面使用了评论显示组件和发表评论组件，但是当评论发表完成后评论显示组件的数据不会自动渲染出来，那么如何让最新的数据渲染呢 问题分析 可以看出这两个组件是兄弟组件，在评论显示组件中，是通过 mounted 生命周期函数获取数据的，也就是 el 挂载到实例上时获取的，但是当发表评论数据库内容变化后，并不能主动去获取数据的更新 问题...
监听兄弟组件的数据变化，实现实时更新
m0_51781561的博客
05-19 772
在main.js中配置 在需要监听的事件中添加自定义事件（这里是一个修改事件）（弹框组件） 在需要实时更新的列表组件中监听编辑方法的变化，就可以做到编辑列表实时更新（列表组件） ...
同级组件传值或者一个组件根据另个组件值变化刷新页面
weixin_41940856的博客
02-23 257
vueBus 1、实例化一个vueBus import Vue from 'vue' const bus = new Vue() export default bus 2、在需要传值页面使用 import vueBus from '@/utils/vuebus' vueBus.$emit('key',vue) 3、接受值改变的页面 import vueBus from "@/utils/vuebus"; mounted() { vueBus.$on("key", function
Vue页面刷新方法(子组件改变数据后兄弟组件刷新，不闪烁)【笔记】
单枪匹码
12-31 2731
问题描述： 今天在做个人博客的时候遇到一个问题，一个文章详情页面使用了评论显示组件和发表评论组件，但是当评论发表完成后评论显示组件的数据不会自动渲染出来，那么如何让最新的数据渲染呢 问题分析： 可以看出这两个组件是兄弟组件，在评论显示组件中，是通过mounted声明周期函数获取数据的，也就是el挂载到实际上时获取的，但是当发表评论数据库内容发生变化后，并不能主动去获取数据的更新 问题解决：...
组件传值后刷新组件
dujyong的博客
02-09 1003
组件传值后更新组件 我们在写页面时，常常会用到组件传值，但是传完值以后页面并不会刷新，这时候
HarmonyOS应用开发高级认证知识点梳理 （二） 组件交互
最新发布
malongxiaoliu89的博客
07-01 1373
HarmonyOS应用开发高级认证 组件交互
头像循环轮播控件实现与动画优化
RelativeLayout允许开发者根据兄弟节点或父容器的相对位置来定位每个ImageView，从而实现多个头像之间的有序排列和动态重排。由于最多仅显示四张图片，系统资源消耗被有效控制，同时保证了界面清晰不拥挤，符合现代...
基于vue 兄弟组件之间事件触发(详解)
12-30
直奔主题！ 兄弟组件之间的事件触发，大概思路是通过父级组件交换数据，watch来监听触发事件。 场景是父级组件A同时引用两个子级组件B，C。点击B组件中的按钮执行C组件中的事件。 第一步：父级组件A methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 this.playStatus = val; }, btmChild:function(val){//C组件自定义事件 this
vue3 组件刷新 在A页面点击事件，B页面内容刷新教程（超实实用）
qq_53722480的博客
04-08 2844
【代码】vue3 组件刷新 在A页面点击事件，B页面内容刷新教程（超实实用）
vue页面中两个子组件如果需要互相联动怎么办？
Comvir的专栏
08-11 1362
已知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 975
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
Vue组件间数据同步刷新解决方案--全局事件总线
Ajucy的博客
04-17 4423
vue，跨组件间数据同步问题解决方案
vue组件强制刷新的5种方案
黎小小的博客
01-30 1万+
Vue底层是双向绑定；
Vue-兄弟组件之间的数据共享
m0_57133702的博客
12-11 1228
兄弟组件之间的数据共享
JSP结合JavaScript实现数据联动
阿布客栈
06-13 3584
  1. 简介JSP结合JavaScript实现数据联动，很多时候我们都要在用户作出选择的时候才会动态列出数据，这时候就必须使用JavaScript来实现数据联动，但是单纯的使用JavaScript而不与数据库连接，则意义不大，这里我演示一个关于省市联动的例子，聊以说明 2. JSP代码page language="java" import="java.util.*" page
WheelView组件联动滑动与图片支持实现数据关联
总结以上知识点，可以看出，在开发涉及选项选择的应用时，一种带有图片支持并能实现数据联动的WheelView控件是非常有用的。它不仅能够提供给用户直观的视觉体验，而且通过数据联动功能能够优化用户的操作流程。此外...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Liuzhipeng-hot

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值