vue平行组件通过emit/on实现数据传递失败问题

已于 2023-04-20 20:12:33 修改
阅读量263 收藏
点赞数 1
文章标签： vue.js
于 2023-04-20 20:08:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45043457/article/details/130274535
版权

关于vue3项目中，平行组件之间通过emit和on方式实现数据传递失败问题？
代码如下：
在这里插入图片描述
在这里插入图片描述

test1
在这里插入图片描述

具体现象：我先打开test1对应的页面，再打开test2对应的页面，然后点击test1页面的按钮，控制台输出如下：
在这里插入图片描述

只有在同一个vue文件里面的on才能接收到child2事件，这是为什么呢？

qq_45043457
关注
Vue组件间的传值
蜗牛~~
08-25 279
方法一、props/$emit 父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。 1.父组件向子组件传值 接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"] //App.vue父组...
antdesign vue 2.0 递归菜单_Vue前端开发——组件篇
weixin_39727402的博客
11-20 317
业务开发的过程中，经常会进行一些组件化的开发，组件常处理的一般有以下几种全局组件局部组件动态组件递归组件全局组件一般很多地方都会用到的一些功能我们一般封装成全局组件去使用，常规的建立一个全局组件的方法是，公共组件放到components 目录文件下使用Vue.component去注册组件，然后在main.js 中去导入这个公共文件夹// demoimport Vue from "vue";impo...
node.js中的emitter.on方法使用说明
01-02
方法说明： 为指定事件注册一个监听器。 语法： 代码如下: emitter.on(event, listener) emitter.addListener(event, listener) 接收参数： event            (string)             事件类型 listener         (function)         触发事件时的回调函数 例子： 代码如下: server.on(‘connection’, function (stream) {   console.log(‘someone connected!’); }); 源码： 代码如下:
vue $on $emit 的使用场景 跨组件传参
word_321的博客
03-10 926
在这里 记录一下（以防自己忘记） 先说一下自己用场景 前段时间 做了一个甘特图的需求 当时时间有限 在网上找了 一个甘特图 例子 根据我司的需求 做了一点修改、 不说废话了 这里是把 甘特图定义成了一个插件。 Vue.prototype.$gante = $gante // 绑定到vue 实例中 当在 test页面组件使用插件的话 this. $gante 就可以了 那么问题来了 如果要在 test 页面中要用 插件中的参数 该怎么做呢 1、 // emitter 是抛出的vue 实例 impo
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个）
weixin_44132285的博客
09-16 8227
vue 组件递归后$emit传值失效的问题（这里提供三个解决思路，建议使用最后一个） 分析原因 1.首先造成传值失效的问题是组件递归后事件传递不到上层。所以造成的问题是在递归组件的第二层里面，监听不到当前事件。 出现的现象 2.造成的现象是我点击递归出来的子菜单的时候，父级组件拿不到点击获取的值，第一次点击渲染的值可以获取到 解决问题的方法 1.可以点击的时候将值存储再vuex里面 点击的时候在父级页面获取到vuex里面存储的值 弊端：点击完页面刷新后，vuex里面的值会消失，影响页面功能（非必要不选择）；
Vue中的emit、on和v-on
qq_38722097的博客
03-07 2373
由于本人才疏学浅本文章参考了诸多大神的想法，会在文末贴上原文地址 一. $on && $ emit $emit(eventName, [...args])：触发事件 $on(eventName, callBack)：监听事件 如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派($emit)男人做事，而男人则一直监听($on)着女士的指派($...
关于 vue 里面使用事件总线busEvent 的 $emit 和 $on 会多次触发的问题
温情
09-08 1419
因为我们的busEvent是全局的，切换路由、跳转页面 $on 并不会自动销毁，所以需要我们手动清除 Bus.$on('handleChange', res => { // 清除事件名为 handleChange 的订阅 Bus.$off('handleChange'); // 然后再做想做的事 }), 也可以在vue生命周期 beforeDestroy 里面清， 看自己。 ...
Vue使用emit传参，父组件接收不到数据问题解决方案
qq_54896194的博客
07-23 1798
一开始我是写着是没问题的，后面需要从子组件传参的数目增加了以后，发现代码基本没变，但是父组件却收不到参数了。
详解vue中的组件通信的几种方式，父子组件通信，兄弟组件通信，父组件触发子组件事件，子组件无法接受值的问题（一）
花落微凉梦清幽的博客
08-08 3047
在另一篇文章我们会谈及祖父孙三级之间的通信，传送门：vue组件通信的方式（二） 1.父组件向子组件传值（绑定属性）： 首先我们定义一个父组件father.vue： <template> <div> <h1>父组件</h1> <p>{{mydata}}</p> <hr/> <
Vue组件通信实践记录（推荐）
12-11
- 方法A：使用全局事件总线（Event Bus），创建一个 Vue 实例作为事件总线，通过 `$emit` 发布事件和 `$on` 监听事件实现通信。 - 方法B：通过父组件的 `$refs` 找到兄弟组件，但要求兄弟组件已经注册了 `ref`。 ...
vue组件传值
weixin_56499671的博客
04-23 180
一、父组件向子组件传值 在父组件的子组件标签中绑定自定义属性 // 父组件 <template> <div> <h1>父组件中：{{ myName }}</h1> <!-- 绑定自定义属性myName --> <son :myName="myName" /> </div> </template> <script> // 引入子组件 import son from
vue3中自定义$emit $on
ybweb的博客
09-07 1638
vue3 自定义$emit $on
Vue 兄弟组件（子组件与子组件间通信）间通信，$on方法失效问题，以及父子组件间通信
laianko的博客
03-30 1381
Vue组件间通信，兄弟组件间，父子组件间
vue3中props的传值问题（传值失败，传值无法响应变化）
byebukesi的博客
09-22 1万+
一般遇到父组件给子组件传值，props必不可少，但是在vue3中，有的人会遇到子组件接收到props中的值不会更新的情况，比如子组件的aa值并不会随着父组件中fatherData的变化而变化，甚至如果你的父组件中fatherData没有赋初始值，在子组件中props.sonData直接会是undifined。
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
热门推荐
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
解决vue3 mitt路由跳转后 on事件获取不到值的奇葩问题解决
路虽远，行则必至！
09-06 2292
在Vue升级到3.0版本后，prototype属性就被取消了，所以我们不能再使用Vue2中的Vue.prototype.$bus=new Vue()的方式来使用全局事件总线。在Vue3中，推荐使用mitt这一三方库来帮助我们实现全局事件总线。
鸿蒙harmony--线程间处理和发送事件Emitter
最新发布
袁震的博客
01-19 3144
想的太多生活中就全是问题，可当你开始行动，这些问题其实都是有答案的，解决焦虑的最好方式，就是把所有的问题都落实到行动上，当你真正开始行动起来，你就会发现这些问题，其实都不是问题!
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
weixin_61945023的博客
07-22 712
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
Vue中的发布订阅分析（Vue3中使用 emit ）
前端kk的博客
03-23 3863
Vue中的发布订阅分析（Vue3中使用 emit ）
Vue2父组件异步数据传递给子组件的问题解析
"Vue2父组件通过props向子组件传递异步数据时，可能存在子组件在父组件数据未获取到前就已经初始化的问题。本文通过两个案例深入解析这个问题，并提出解决方案。" 在Vue2中，父组件可以通过props向子组件传递数据，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值