如何在动态组件<component :is="currentPage“等></component>结构中管理vue3 options中的v-on/@

Question

我正在学习Vue 3 Options API中的动态组件呈现，到目前为止，我已经了解了:is="currentPage“以及v-bind="currentProps”是如何工作的。但是，在以下情况下，我不知道如何处理我的事件侦听器：

假设我有三个组件: A、B、C。每个组件都有一个或多个事件，为了演示目的，现在使用一个按钮，当单击它时，它将呈现下一个页面：

A -> B，B -> C，C -> A等。

// app.vue

import componentA from '~/components/componentA.vue
import componentB from '~/components/componentB.vue
import componentC from '~/components/componentC.vue

export default {
components: {
  componentA,
  componentB,
  componentC,
}
data() {
  return { 
    currentPage: 'componentA',
    currentProps: {
      label: 'go to B'
    },
  }
},
method: {
    goToA(){
      this.currentPage = 'componentA'
      this.currentProps = {label: 'go to B'}
    },
    goToB(){
      this.currentPage = 'componentB'
      this.currentProps = {label: 'go to C'}
    },
    goToC(){
      this.currentPage = 'componentC'
      this.currentProps = {label: 'go to A'}
    }
}

静态表单如下所示：

// app.vue

<template>
    <componentA label="go to B" @event-of-a="goToB" />
    <componentB label="go to C" @event-of-b="goToC" />
    <componentC label="go to A" @event-of-c="goToA" />
</template>

这里是动态版本和我的问题:我可以动态地选择"currentPage“和"currentProps”，但是如何将正确的事件侦听器绑定到"currentPage“呢？

<template>
    <component :is="currentPage" v-bind="currentProps" ?event-listener? ></component>
</template>

Answer 1

无法将正确的事件侦听器绑定到动态组件。但是，只需将所有事件侦听器绑定到动态组件，并使用以下条件处理它：

<component :is="currentPage" v-bind="currentProps" @event-of-a="goToB" @event-of-b="goToC" @event-of-c="goToA" 
@click="handleClickOfAllComponent(currentPage, $event)"></component>

<script setup>
function handleClickOfAllComponent(currentComponent, event) {
  if(currentComponent === 'A') {
    // handle click for component A
  }
  if(currentComponent === 'B') {
    // handle click for component B
  }
  ...
}
</script>