EventBus 子组件、弹窗等触发父组件事件,或组件相互传值

创建event-bus.js文件,内容如下:

import Vue from 'vue';
export const EventBus = new Vue();

在父子组件内分别引入:

import { EventBus } from './js/event-bus';

父组件定义触发后的操作,或传的值:

created() {
    EventBus.$on('refreshTreeKey', () => {
        this.treeKey++;
    });
},
destroyed() {
    EventBus.$off('refreshTreeKey');
},

created() {
  EventBus.$on('currentRow', (data) => {
    this.currentRow = data;
  });
},
destroyed() {
  EventBus.$off('currentRow');
},

子组件触发父组件自定义事件:

EventBus.$emit('refreshTreeKey');

EventBus.$emit('currentRow', this.currentRow);

Vue中,可以通过使用事件总线(Event Bus)来实现组件组件传递值,同时组件也可以修改组件的值。下面是一些基本步骤和注意事项: 1. 在组件中,首先需要创建一个事件总线对象,可以在全局范围内使用。可以使用Vue实例对象来创建事件总线对象,并将其导出,以便在其他组件中使用。 ```php // 在组件中 import eventBus from './eventBus' export default { methods: { init() { // 创建事件总线对象并导出 this.$eventBus = eventBus }, // 其他方法... } } ``` 然后在需要传递事件和接收事件组件中导入和使用事件总线对象。 2. 在组件中,可以通过事件总线对象来发布事件和接收事件。例如,可以使用`$emit`方法来发布事件,并传递需要传递的值。 ```php // 组件中 this.$eventBus.$emit('eventName', value) ``` 在组件中,可以使用`$on`方法来监听组件发布的事件,并获取传递的值。 ```php // 组件中 this.$eventBus.$on('eventName', (value) => { // 处理从组件传递过来的值 }) ``` 注意:在使用事件总线时,应该避免在循环中触发事件,因为这可能会导致无限循环。同时,为了避免内存泄漏,应该使用Vue提供的清理机制来销毁不再使用的实例对象。 3. 组件可以通过修改组件的值来响应某些事件。例如,当组件接收到组件发布的事件后,可以根据需要修改组件的值。可以使用Vue的响应式机制来实现这一功能。在组件中,使用`watch`选项来监听组件传递的值,并在需要时更新组件的值。 以上是Vue中使用事件总线实现组件组件传递值和组件修改组件值的基本步骤和注意事项。需要注意的是,在使用事件总线时应该注意避免循环引用和内存泄漏问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

秋绥冬禧.

一键三联就是最大的支持

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

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

打赏作者

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

抵扣说明:

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

余额充值