vue组件传值之 eventBus 使用指南

最新推荐文章于 2024-08-15 10:31:28 发布

前端小泰迪

最新推荐文章于 2024-08-15 10:31:28 发布

阅读量2.3k

点赞数 1

分类专栏： vue 文章标签： vue 组件传值 eventBus

本文链接：https://blog.csdn.net/qq_33350717/article/details/89489398

版权

VUE eventBus

问题背景：组件传值；在项目开发中，会发现组件传值是一个组基本的操作，也是用的最多的。但是很多时候可能涉及到爷爷和孙子，甚至重孙子之间需要的传值。这个时候eventBus就到了大显身手的时候了。
eventBus 嗯，就叫一个事件公共汽车吧。每个人把需要共享给别人的物品就放在这个车上，谁需要了就可以去拿，这样子是不是很方便，每个人都可以访问到，每个人也可以往这个车子上放东西。
下面开始这个过程，一共就四步。

第一步就是先把公交车造出来。先创建eventBus.js 文件。

/**
 * 某某页面
 * @author: leon
 * @create: 2018-05-21 10:01
 */

import Vue from 'vue';

const bus = new Vue();

export default {
    /**
     * 注册全局事件
     * @param eventName 事件名称
     * @param handler 事件处理函数
     * @param scope vm对象，一般传this 建议必须要传（页面的this），自动销毁功能
     * @param once 是否单次注册
     */
    on(eventName, handler, scope = null, once = false) {
        if (once) {
            bus.$once(eventName, handler);
            return;
        }
        bus.$on(eventName, handler);
        if (scope) {