如何异步等待子组件中的事件？Vue路由器

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

// ChildComponent.vue
<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
import { EventBus } from '@/main'

export default {
  methods: {
    triggerEvent() {
      EventBus.$emit('custom-event', data)
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
import { EventBus } from '@/main'

export default {
  data() {
    return {
      eventData: ''
    }
  },
  created() {
    EventBus.$on('custom-event', (data) => {
      this.eventData = data
    })
  }
}
</script>

npm install vuex

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    eventData: ''
  },
  mutations: {
    setEventData(state, data) {
      state.eventData = data
    }
  },
  actions: {
    updateEventData({ commit }, data) {
      commit('setEventData', data)
    }
  }
})

// ChildComponent.vue
<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['updateEventData']),
    triggerEvent() {
      this.updateEventData(data)
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['eventData'])
  }
}
</script>