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);
相关推荐
南雨北斗17 分钟前
Vue 3 修饰符(Modifiers)
前端
会豪17 分钟前
工业仿真(simulation)--前端(七)--消息栏
前端
Jinuss41 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海41 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手42 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪1 小时前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪1 小时前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__1 小时前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工1 小时前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主1 小时前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端