vue项目中bus事件的使用

一、全局bus总线事件

//main.js 在该文件中添加总线事件配置
new Vue({
  router,
  store,
  // bus全局事件,总线配置
  beforeCreate() {
    Vue.prototype.$bus = this
  },
  
  render: h => h(App)
}).$mount('#app')

//bus事件触发
this.$bus.$emit('事件名') //不传递参数
this.$bus.$emit('事件名',val)
//bus事件接收
this.$bus.$on('事件名',()=>{console.log(456)}))
this.$bus.$on('事件名',val=>{this.val=val}))

//销毁bug事件监听
destroyed(){
  this.$bus.$off('事件名')
 },

二、引用型

1.新建js文件

//eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
//export default new Vue()

2.在需要使用bus事件的组件中引入上述js文件

import eventBus form './eventBus '
//触发事件
eventBus.$emit('事件名'，值)
//监听事件
eventBus.$on('事件名')