【eventBus】-CSDN博客

main,js

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// fade/zoom 等
import 'element-ui/lib/theme-chalk/base.css'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
// import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
Vue.component(ElImageViewer.name, ElImageViewer)
import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'
import VueAMap from 'vue-amap'
import '@/icons' // icon
import '@/permission' // permission control

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

import gisUtil from './utils/gisUtil.js'
Vue.prototype.$gisUtil = gisUtil

import dateUtil from './utils/dateUtil.js'
Vue.prototype.$dateUtil = dateUtil

import toolUtil from './utils/toolUtil.js'
Vue.prototype.$toolUtil = toolUtil

import machineUtil from './utils/machineUtil.js'
Vue.prototype.$machineUtil = machineUtil

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

import VueParticles from 'vue-particles'
Vue.use(VueParticles)

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

import lottie from 'vue-lottie'
Vue.component('lottie', lottie)

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce // 将全局tinymce对象指向给Vue作用域下
Vue.use(VueTinymce) // 安装vue的tinymce组件

/**icon 图标 */
import '@/assets/css/iconfont.css';
import '@/assets/css/icon/iconfont.css'
import '@/assets/icons/iconfont.css'
import '@/assets/css/tower/iconfont.css'
Vue.prototype.$tag = 0

// import localForage from 'localforage';

import VueWorker from 'vue-worker' // Web worker插件
Vue.use(VueWorker)

// Vue.prototype.$webSocketPath = 'ws://192.168.0.207:8765'
// Vue.prototype.$webSocketPath = 'ws://127.0.0.1:8765'
// Vue.prototype.$webSocketPath = 'ws://192.168.0.109:8765'
// Vue.prototype.$webSocketPath = 'ws://119.45.227.52:8765'
// Vue.prototype.$webSocketPath = 'ws://efuavserverhost:8080' // docker容器地址

import layer from 'vue-layer'
import 'vue-layer/lib/vue-layer.css'
Vue.prototype.$layer = layer(Vue)

// 使用视频播放器
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

import '@/assets/tcplayer/tcplayer.min.css'
// import '@/assets/TcPlayer-2.4.1/TcPlayer-2.4.1.js'
// import '@/assets/TcPlayer-2.4.1/TcPlayer-module-2.4.1.js'
import { TcPlayer } from '@/assets/TcPlayer-2.4.1/TcPlayer-2.4.1.js'
Vue.prototype.TcPlayer = TcPlayer

Vue.prototype.$layer = layer(Vue, { // 全局配置项
    msgtime: 3 // 目前只有一项，即msg方法的默认消失时间，单位：秒
})
/**
     * If you don't want to use mock-server
     * you want to use MockJs for mock api
     * you can execute: mockXHR()
     *
     * Currently MockJs will be used in the production environment,
     * please remove it before going online ! ! !
     */
// if (process.env.NODE_ENV === 'production') {
//     const { mockXHR } = require('../mock')
//     mockXHR()
// }

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
import Directives from './directive'

Vue.use(Directives)

import Plugin from 'v-fit-columns';
Vue.use(Plugin);

import MyGlobalFooter from './views/components/MyGlobalFooter.vue';

const EventBus = new Vue();
Vue.prototype.$EventBus = EventBus;

Vue.mixin({
    beforeDestroy() {
        this.$EventBus.$off();
    }
});

import BusFactory from './bus'
// 创建一个 Vue 实例
const vueInstance = new Vue()
// 在Vue原型上添加$bus属性，使得在所有组件中都能够访问到同一个事件总线实例
Vue.prototype.$bus = BusFactory(vueInstance)

import gtMessage from './message'
Vue.prototype.$gtmessage = gtMessage;

// Vue.prototype.$bus = BusFactory;

Vue.component('my-global-footer', MyGlobalFooter);


Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

bus.js

/*
 * @Descripttion: 
 * @version: 
 * @Author: Eugene
 * @Date: 2024-03-15 14:59:27
 * @LastEditors: Andy
 * @LastEditTime: 2024-03-19 13:16:16
 */
import Vue from 'vue'
 
// 存储所有的事件
const EventStore = {}
const Index = new Vue()
 
const destoryHandler = function() {
    // this 为调用此方法的vue组件
    const currentEventObj = EventStore[this._uid]
    if (!currentEventObj) {
        return
    }
    for (const type in currentEventObj) {
        const key = Array.isArray(type) ? type.join(',') : type
        // Index 解绑事件
        Index.$off(type, currentEventObj[key])
    }
    // 删除记录的事件集合
    delete EventStore[this._uid]
}
 
const BusFactory = (vm) => {
    console.log('BusFactory',vm);
    // 获取当前组件实例的destroyed生命周期
    const destroyed = vm.$options.destroyed
    // 获取当前组件实例的uid
    const uid = vm._uid
 
    EventStore[uid] = {}
 
    !destroyed.includes(destoryHandler) && destroyed.push(destoryHandler)
 
    return {
        $on: (type, handler) => {
            const key = Array.isArray(type) ? type.join(',') : type
            EventStore[uid][key] = handler
            Index.$on(type, handler)
        },
        $off: (type, handler) => {
            if (!type) {
                delete EventStore[uid]
                Index.$off()
                return
            }
            const key = Array.isArray(type) ? type.join(',') : type
            // 删除对应的事件
            delete EventStore[uid][key]
            Index.$off(type, handler)
        },
        $once: (...params) => Index.$once(...params),
        $emit: (...params) => Index.$emit(...params)
    }
}
 
// 这两行是允许bus不调用依然能够触发emit和once
BusFactory.$emit = (...params) => Index.$emit(...params)
BusFactory.$once = (...params) => Index.$once(...params)
 
export default BusFactory

周期

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        // console.log("parent", this.$attrs, this.$listeners);
        this.$bus.$on('send:removeAll', this.removeImageryAll)
        this.$bus.$on('send:toFocus', this.toFocus)
        this.$bus.$on('send:addImagery', this.sendAddImagery)
        this.$bus.$on('send:toHide', this.toHide)
    },
        beforeDestroy() {
        this.destroyEventListener()
        this.$bus.$off('send:removeAll', this.removeImageryAll)
        this.$bus.$off('send:addImagery', this.sendAddImagery)
        this.$bus.$off('send:toFocus', this.toFocus)
        this.$bus.$off('send:toHide', this.toHide)
    }, //生命周期 - 销毁之前

其他函数调用

// 发送事件通知移除所有
 this.$bus.$emit('send:removeAll');