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);
相关推荐
前端加油站20 分钟前
Chrome/Firefox 浏览器扩展开发完整指南
前端·chrome
码途进化论21 分钟前
从Chrome跳转到IE浏览器的完整解决方案
前端·javascript
笙年26 分钟前
Vue 基础配置新手总结
前端·javascript·vue.js
哆啦A梦158829 分钟前
40 token
前端·vue.js·node.js
炫饭第一名39 分钟前
Cursor 一年深度开发实践:前端开发的效率革命🚀
前端·程序员·ai编程
摇滚侠1 小时前
Vue 项目实战《尚医通》,获取挂号医生的信息展示,笔记43
前端·javascript·vue.js·笔记·html5
晴殇i1 小时前
关于前端基础快速跨入鸿蒙HarmonyOS开发
前端·harmonyos
k09331 小时前
vue3中基于AntDesign的Form嵌套表单的校验
前端·javascript·vue.js
茶憶1 小时前
UniApp RenderJS中集成 Leaflet地图,突破APP跨端开发限制
javascript·vue.js·uni-app
没头脑和不高兴y1 小时前
Element-Plus-X:基于Vue 3的AI交互组件库
前端·javascript