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);
相关推荐
用户14567756103717 小时前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎17 小时前
npm、yarn、pnpm
前端·npm·node.js
天生我材必有用_吴用17 小时前
Vue3 + VitePress 搭建组件库文档平台(结合 Element Plus 与 Arco Design Vue)—— 超详细图文教程
前端
liu****18 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San3018 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo18 小时前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶19 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex519 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人19 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine19 小时前
JS Entry和 HTML Entry
前端