兄弟组件传值,$emit方法无效的问题解决

在Vue.js项目开发中遇到兄弟组件间通信的问题,使用this.$emit方法出现偶尔生效的情况。尝试了命名调整、通过父组件传递、异步调用等方法未解决问题。最终,采用事件总线(Event Bus)成功解决了兄弟组件间的通信问题。

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

在项目的开发中,发现了一个问题,在兄弟组件通信的过程中发现 this.$emit 时而生效,时而又不生效,

网上查了好多文章,也试了各种方法,

1,命名不使用驼峰,使用-连接,比如: this.$emit(‘my-method’);

2,使用this.$parent.方法名调用

3,异步执行,在关闭弹框之前调用

以上方法都未能解决

最终解决方案,使用事件总线

事件总线

// eventBus.js
import Vue from 'vue'

export default
Vue中,可以通过使用$emit和$on方法来实现父子组件之间的数据输。通过$emit方法,子组件可以将数据发送给父组件,而通过$on方法,父组件可以监听并接收子组件发送的数据。 具体来说,子组件可以在需要递数据的地方使用$emit方法,并在方法中指定一个自定义事件名称和要递的数据。例如,在子组件中可以使用以下代码实现递数据给父组件: ``` <button @click="btn">点击</button> methods: { btn() { this.$emit('father', 10) } } ``` 在上述代码中,子组件中的按钮点击事件会调用btn方法,并在方法中通过this.$emit('father', 10)来触发一个名为'father'的自定义事件,并递数10给父组件。 而在父组件中,可以通过在子组件元素上使用@father来监听该自定义事件,并在父组件方法中接收递的数据。例如,在父组件中可以使用以下代码来接收子组件递的数据: ``` <child @father="add"></child> methods: { add(e) { console.log(e) } } ``` 在上述代码中,父组件通过监听子组件上的'father'自定义事件,并在add方法中接收递的数据。在此例中,子组件通过this.$emit('father', 10)递的数据10会在父组件的add方法中打印出来。 因此,通过使用$emit和$on方法,可以在Vue中实现父子组件之间的数据输。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中的$emit 与$on父子组件兄弟组件的之间通信方式](https://download.csdn.net/download/weixin_38590989/12759856)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue父子组件](https://blog.csdn.net/dtbk123/article/details/105643047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue组件向父组件(this.$emit()方法)](https://blog.csdn.net/weixin_42246997/article/details/104524727)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值