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);
相关推荐
椰子皮啊10 分钟前
mediasoup+Vue3避坑指南:解决黑屏、闪屏、流绑定失效三大难题
vue.js·前端框架
叫我一声阿雷吧12 分钟前
JS 入门通关手册(24):Promise:从回调地狱到异步优雅写法
javascript·前端开发·promise·前端面试·异步编程·js进阶·js异步
开源盛世!!35 分钟前
3.19-3.21
linux·服务器·前端
必胜刻36 分钟前
AJAX 请求理解
前端·ajax·okhttp·前后端交互
小民AI实战笔记38 分钟前
NVM实战指南:高效管理你的Node.js环境
前端·node.js
www_stdio40 分钟前
前端异步核心:Promise 从入门到吃透
前端
朱建伟43 分钟前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite
vball1 小时前
宏观数据从哪里来?——主流宏观经济数据库与API全景
前端
zhensherlock1 小时前
Protocol Launcher 系列:Trae AI 编辑器的深度集成
javascript·人工智能·vscode·ai·typescript·编辑器·ai编程
吠品1 小时前
Vue项目Moment.js引入优化:全局挂载与按需引入的深度解析与最佳实践
前端·javascript·vue.js