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);
相关推荐
JiaWen技术圈13 分钟前
主流非 JWT 式 Access Token 方案
前端·安全
ZC跨境爬虫34 分钟前
跟着 MDN 学 HTML day_57:(HTML 表格进阶特性与无障碍实践)
java·前端·javascript·ui·html·音视频
Moment34 分钟前
刷 Reddit 1 小时没结果?我用这个方法 10 秒挖出真实需求
前端·javascript·后端
折翅嘀皇虫36 分钟前
【无标题】steal_work_thread_pool
服务器·前端·算法
w_t_y_y38 分钟前
VUE组件配置项(零)概述
前端·javascript·vue.js
水云桐程序员39 分钟前
Web应用的分类
前端·javascript·vue.js·react.js·webkit
Jack N39 分钟前
2026 Web 网站性能优化指南
前端·性能优化
yqcoder39 分钟前
TypeScript 进阶:如何精准获取对象的所有 Key?
javascript·ubuntu·typescript
UXbot40 分钟前
支持移动端原型绘制的 AI 工具核心功能对比(2026):5 款主流平台能力横向评测
前端·低代码·ui·交互·原型模式·web app
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_54:(深入掌握 XSLTProcessor API)
前端·javascript·ui·html·媒体