EventBus的用法2

bb本文让你学到如何将vue实例对象挂载到全局对象上，让所有组件可以访问

main.js

利用Object.defineProperty在全局window对象上定义一个只读不写的属性__appVueInstance__，他的值为vue实例对象。 

import Vue from 'vue'; import App from './App.vue';    const vueInstance = new Vue({ 	router, 	store, 	render: (h) => h(App), }).$mount('#app');  // 将vue实例对象挂载到全局，在request拦截中，需要获取路由相关数据 Object.defineProperty(window, '__appVueInstance__', { 	value: vueInstance, 	writable: false, 	configurable: false, 	enumerable: true, }); 

event-bus.js

创建文件，里面保存所有事件的名称

// const eventBus = window.__fzAppVueInstance__; // window.__fzAppVueInstance__ 指向 Vue 实例 在main.js函数中注册  const getEventBus = () => {   return window.__appVueInstance__; };   const eventBusMap = {   _DELDATA_: 'delData', // 删除数据   _SHOWDATA_: 'showData', // 显示数据 };  export { eventBusMap, getEventBus }; 

接收时间

<!-- A.vue --> <template>    </template>   <script>  import { eventBusMap, getEventBus } from '@/utils/event-bus'; const EventBus = getEventBus();  export default {  	created() { 		EventBus.$on(eventBusMap._DELDATA_, (info) => { 			console.log(info) 		}); 		EventBus.$on(eventBusMap._SHOWDATA_, (info, key) => { 			console.log('eventMiBusMap._CONNATTRIBUTE_', info, key); 		}) 	},     beforeDestroy() { 		// 组件销毁前，移除事件监听器 		EventBus.$off(eventBusMap._DELDATA_); 		EventBus.$off(eventBusMap._SHOWDATA_); 	}, };  </script> 

发送事件

<!-- B.vue --> <template>     <button @click="sendMsg()">-</button> </template>  <script>  import { eventBusMap, getEventBus } from '@/utils/event-bus'; const EventBus = getEventBus(); export default {   methods: {     sendMsg() {       EventBus.$emit(eventBusMap._DELDATA_, '删除成功');     }   } };  </script>