Vue事件总线实例（全局事件）

Posted 2021-05-20 断风尘

得到事件总线对象

// src/assets/js/event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

注册监听事件

<script>
import { EventBus } from '@/assets/js/event-bus.js'

export default {
  name: 'CustomerManagement',
  data () {
    return {
    }
  },
  mounted () {
    // 参数一为事件渠道标识，与触发中的标识一致；参数二位事件回调函数，函数内携带事件传递的数据
    EventBus.$on('selected-industry', (data) => {
      console.log(data)
    })
  },
  methods: {
  }
}
</script>

触发事件

<script>
import { EventBus } from '@/assets/js/event-bus.js'

export default {
  name: 'IndustryTree',
  props: {
  },
  data () {
    return {
    }
  },
  methods: {
    selectedIndustry (data) {
      // 第一个参数为事件渠道标识，与注册中的标识一致，第二个为事件携带的数据
      EventBus.$emit('selected-industry', data) // 触发事件
      // 如果只想触发一次，可使用once
      // EventBus.$once('selected-industry', data) // 触发事件
    }
  }
}
</script>

挂在到Vue原型

如果不想在每一个用到的组件中都重复引入EventBus对象，可以直接在main.js中将EventBus对象挂载到Vue原型下。

• 挂载

// src/main.js
import { EventBus } from '@/assets/js/event-bus.js'
Vue.prototype.$eventBus = EventBus

• 使用

    // 注册
    this.$eventBus.$on('selected-industry', (data) => {
      console.log(JSON.stringify(data))
    })
    // 触发
    this.$eventBus.$emit('selected-industry', data) // 触发事件