如何传递嵌套子组件的事件？

<template>
  <div>
    <ChildComponent @customEvent="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent() {
      // 处理事件逻辑
    }
  }
}
</script>

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('customEvent');
    }
  }
}
</script>

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

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  mounted() {
    eventBus.$on('customEvent', this.handleEvent);
  },
  beforeDestroy() {
    eventBus.$off('customEvent', this.handleEvent);
  },
  methods: {
    handleEvent() {
      // 处理事件逻辑
    }
  }
}
</script>

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import { eventBus } from './eventBus.js';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('customEvent');
    }
  }
}
</script>

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 状态
  },
  mutations: {
    // 修改状态的方法
  },
  actions: {
    // 处理事件的方法
  }
});

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['handleEvent'])
  }
}
</script>

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['triggerEvent'])
  }
}
</script>