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);
相关推荐
金灰几秒前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
茶卡盐佑星_3 分钟前
说说你对es6中promise的理解?
前端·ecmascript·es6
Манго нектар31 分钟前
JavaScript for循环语句
开发语言·前端·javascript
蒲公英100138 分钟前
vue3学习:axios输入城市名称查询该城市天气
前端·vue.js·学习
天涯学馆1 小时前
Deno与Secure TypeScript:安全的后端开发
前端·typescript·deno
以对_1 小时前
uview表单校验不生效问题
前端·uni-app
Zheng1132 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
程序猿小D2 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
john_hjy2 小时前
【无标题】
javascript
奔跑吧邓邓子2 小时前
npm包管理深度探索:从基础到进阶全面教程!
前端·npm·node.js