vue3 ts怎么在页面中的tab栏中切换两个组件并传值到组件

在 Vue3 中，你可以通过使用`<component>`元素来实现在页面中的 tab 栏中切换两个组件。例如：

<template>
  <div>
    <ul>
      <li @click="activeTab = 'ComponentA'" :class="{ 'active': activeTab === 'ComponentA' }">Tab A</li>
      <li @click="activeTab = 'ComponentB'" :class="{ 'active': activeTab === 'ComponentB' }">Tab B</li>
    </ul>

    <component :is="activeTab" :propA="propA" @eventA="handleEventA" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default defineComponent({
  name: 'Tab',
  components: {
    ComponentA,
    ComponentB,
  },
  setup() {
    const activeTab = ref('ComponentA')
    const propA = ref('')

    const handleEventA = (value: string) => {
      // 接收来自 ComponentA 的事件并处理
      propA.value = value
    }

    return {
      activeTab,
      propA,
      handleEventA,
    }
  },
})
</script>

在上述代码中，我们通过使用`<component>`元素来根据`activeTab`的值来动态切换 ComponentA 和 ComponentB 组件。同时，我们还定义了一个名为`propA`的 prop，并将其传递给了子组件。当 ComponentA 组件中发生了事件`eventA`时，我们也可以通过`@eventA="handleEventA"`来接收事件并处理。