$bus使用极其封装

$bus封装

eventBus.js

import Vue from 'vue'

// const eventBus = new Vue()
let _bus = null;

const getBus = () => _bus || (_bus = new Vue());

/**
 *
 * @param {*} eventName
 * @param {*} opts  { method, data }
 */
export const busTrigger = (eventName = '', opts = {}) => {
    if (!eventName) return
    return getBus().$emit(eventName, opts)
}

/**
 * 节流触发函数 生成函数
 * 节流触发: 在delayTime时间内，缓存入参，时间结束后一起触发
 * @param {*} param0
 */
export const createDelayTrigger = ({ delayTime }) => {
    let delayTriggerTimer = null;
    let callCacheArgs = [];
    return function (eventName, opts) {
        if (delayTriggerTimer) {
            callCacheArgs.push({ eventName, opts })
            return
        } else {
            callCacheArgs.push({ eventName, opts })
            delayTriggerTimer = setTimeout(() => {
                callCacheArgs.forEach(arg => getBus().$emit(arg.eventName, arg.opts));
                callCacheArgs = []
                clearTimeout(delayTriggerTimer)
                delayTriggerTimer = null;
            }, delayTime)
        }
    }
}

export const delayBusTrigger = createDelayTrigger({ delayTime: 1000 })

export const busListen = (eventName = '', callback = () => { }) => {
    if (!eventName) return
    return getBus().$on(eventName, callback)
}

export const removeListen = (eventName, callback) => {
    if (!eventName) {
        getBus().$off()
    } else if (!callback) {
        getBus().$off(eventName)
    } else {
        getBus().$off(eventName, callback)
    }
}

$bus使用

import { busTrigger } from '@/base/eventBus'

busTrigger('remoteLockCar')

import { busListen } from '@/base/eventBus'

mounted () {
    // 远程锁车触发
    busListen('remoteLockCar', async (res) => {
        this.$refs['remoteLockCar'].toggleVisible()
    })
},