vue 同级组件之间的通信

最新推荐文章于 2025-04-11 22:38:39 发布
转载 最新推荐文章于 2025-04-11 22:38:39 发布 · 643 阅读 · 0

本文探讨了使用事件总线传递组件内容时遇到的问题，具体表现为向后台发送请求时报错。错误的原因在于事件处理过程中的this指向问题，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


http://blog.youkuaiyun.com/wang_meiwei/article/details/75948844    



用这个事件总线可以将组件的内容进行传递，当传递过去后 向后台发送请求时，会报错

Uncaught TypeError: Cannot read property 'post' of undefined



原因是
var that = this;//this在此时指向信息传递对象，所以需要在外面重新指向this


当发送请求时需要在其他钩子函数中用this指向

zyx_
关注
VUE组件之间通信大全（9种）
weixin_40800275的博客
06-26 1299
在实际研发过程中，我们会将页面分解，放在中。这个时候组件之间通信在所难免！如何进行组件通信？子组件如何使用父组件的元素？父组件如何获取子组件的数据？隔代组件如何通信？兄弟组件之间如何通信？任意组件之间如何共享数据？等等。本文共讲解了VUE中9种组件通信/数据共享方式，并提供。方式1：defineProps（父传子、子传父）父组件中使用变量形式传给子组件、子组件1.1 父组件代码1.2 子组件代码用defineProps 直接接收父类传来的值、对象、方法等1.3 效果展示。
Vue2 组件通信方式
g841805的博客
05-10 942
props/emit props 作用：父组件通过 props 向子组件传递数据 parent.vue <template> <div> <Son :msg="msg" :pfn="pFn"></Son> </div> </template> <script> import Son from './son' export default { name: 'Par
Vue同级组件的通信
vs2008ASPNET的专栏
04-25 541
Vue父子级组件通信可以用自定义事件，通过在父组件定义一个事件，然后在子组件中$emit("事件名",....参数)，即可触发父组件定义的事件，如果是同级组件就不能这样直接通信，因为脱离了事件的作用域了，但平时开发中确实会有这样的需求，可以通过一个中间组件来实现消息传递，中间组件 可以理解成 同级组件的通信桥梁，但可以通过可以访问 中间组件来获取数据。 这个中间组件可以是新的Vue实例、根实例，...
VUE同级组件通信
的博客
09-05 2549
vue兄弟组件(同级组件)通信 vue 除了常用的父子组件通信之外, 有时也会用到兄弟组件即同级组件之间的通信 解决方案：(例: 组件A和组件B之间进行通信, A控制B展示隐藏) 1. 先新建一个js文件，暂叫它为eventBus.js (文件名随意),在内部注册一个空的vue 实例， 作为兄弟组件之间的中转站 import Vue from 'vue' export default ...
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
vue 组件之间的通信
青蛙king的博客
08-14 6392
目录 前言 一、props 和 $emit 二、$attrs 和 $listeners 三、中央事件总线 四、provide 和 inject 五、v-model 六、$parent 和 $children 七、boradcast 和 dispatch 八、vuex 处理组件之间的数据交互 前言 参考：https://segmentfault.com/a/1190000018331900 vue 组件之间的通信方式大概有 9种： props 和 $emit $refs $at.
Vue3组件间通信的多种方式（超全）
小王的技术库
10-29 3305
通过vue和only-allow库的研究，使用一些工具和手段来约束团队，从而实现项目包管理器的规范化而这些使用这些工具，能够帮助我们更加便捷的实现规范化流程，使得项目流程上更加统一和工程化。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
vue 使用eventBus实现同级组件的通讯
08-27
Vue 使用 EventBus 实现同级组件的通讯 Vue.js 是一个流行的前端框架，它提供了多种方式来实现组件之间的通讯，其中之一就是使用 EventBus。EventBus 是一个中央事件总线，允许组件之间相互通讯。今天，我们将学习...
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
08-29
本教程将详细介绍如何基于vue-cli和webpack，使用自定义事件总线（Event Handler）来解决同级组件之间的通信。 首先，我们需要创建一个事件传递中心，即EventHandler.js文件。导入Vue实例并创建一个新的Vue实例，这...
Vue.js组件之同级之间的通信
weixin_33859231的博客
03-11 120
&lt;!DOCTYPE html&gt;　　&lt;html lang="en"&gt;　　&lt;head&gt;　　　　&lt;meta charset="UTF-8"&gt;　　　　&lt;title&gt;componentKnowledge-同级组件通信&lt;/title&gt;　　　　&lt;script src="js/vue.js&qu
vue 平级组件通信
YZ_ZZZ24的博客
07-21 620
代码很简单(就2句)，只是创建一个空的vue实例。
vue中组件间的通信
weixin_54256573的博客
03-13 732
组件中的通信方法有很多种，下面就做总结一下经常用到的一些吧！ 1. props和$emit 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。 父给子传值： 子给父传值： 总结： 1).父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件； 2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件。 ...
vue组件之间的通信
zhuzongzhi856的博客
03-14 454
7、vue 组件之间的通信提示：情况一：组件很多，且通信复杂 =&gt; 建议使用vuex;情况二：组件不多 =&gt; 建议使用事件触发$emit 和监听 $on;主要介绍情况二：7.1 兄弟组件(或者 完全不相关的组件)创建事件中心（即new vue()）let Hub = new Vue();组件1：触发Hub.$emit('myClick'[, param ...]);组件2：监听Hub....
Vue组件之间的通信
qq_60602244的博客
07-14 940
组件之间的通信方式。
Vue组件之间的通信交互
ai520587的博客
09-12 343
Vue组件之间的通信，我目前只知道两种，一种是$emit，父与子组件之间的通信交互，亦可实现通过”子——父——子“实现兄弟组件通信交互；第二种是Vuex，通过Vuex的核心store可实现任何组件之间的通信交互，不区分子父组件还是兄弟组件之间。 需要注意的是，Vuex适合中大型项目，或者项目中组件之间通信交互比较多的话可以用，通信交互比较少的话还是用第一种吧！ demo以后写，现在上班时间，嘿...
vue同级组件通信（只用vue）
runOnWay的博客
02-07 1757
vue组件通信，有父子组件通信和同级组件通信两种。在有vuex的时候，可以很轻易的通过全局的$store来进行中转，若只用vue自身进行同级通信。 例子中是ap1显示me1信息，在ap2中用按钮改变ap1中的值。 创建app一个vue实例作为中转 在ap2中点击按钮，用app.$emit触发app实例的一个方法，并传值。 在ap1中的created阶段，用app.$on 来接收app自定义事
vue组件之间的通信方式
最新发布
2301_80140433的博客
04-11 358
},methods: {console.log('接收到子组件的数据：', data);</script>-- 子组件 --><template><button @click="sendData">发送数据给父组件</button><script>methods: {const childData = '这是来自子组件的数据';
Vue组件间通信方式
pobu168的博客
10-12 805
本文描述Vue组件之间通信的几种方式：emit、$refs、$children、$parent
Vue组件间通信详解与实践
总结来说，Vue组件间的通信主要通过props和事件来实现，而父子组件间的通信更为直接，而兄弟组件通信则需要额外的设计和协调。熟练掌握这些通信方式是构建可维护、可扩展的Vue应用的关键。建议参考以下链接进一步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值