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);
相关推荐
渣波5 分钟前
深度解析工厂模式:从蜜雪冰城到 NestFactory,彻底搞懂“创建与使用分离”
前端·javascript
蔓越莓6 分钟前
打包工具:编译器ESBuild
前端·面试
用户921080262867 分钟前
Bubble 的 loading 和 typing:AI 回复生成中的交互处理
前端
SamChan9011 分钟前
用Playwright端到端测试PDF翻译功能:Web自动化测试实战
前端·python·ai·pdf·wpf
平生不晚15 分钟前
在 SVG 体系里画一条任意的线
前端·算法
用户0595401744632 分钟前
把大模型记忆召回测试从 30 分钟手工核对压到 3 秒自动化,pytest + FAISS 这套组合救了我
前端·css
醉里博客33 分钟前
醉里起始页 Snavigation2.0:纯前端导航页的二开改造与性能优化实践
前端
雪芽蓝域zzs1 小时前
新建前端pnpm(vue js ) 仿若依项目(一)
前端·javascript·vue.js
vipbic1 小时前
网站升级了,我却有点舍不得
前端·vue.js·后端
IT_陈寒1 小时前
Java Stream并行处理让我数据库崩了两次
前端·人工智能·后端