vue3全局事件总线学习

Posted 2023-04-15 朝朝暮暮

1. vue3全局事件总线
   参考：https://blog.csdn.net/mfxcyh/article/details/124167423

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

得到事件总线对象

// 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) // 触发事件