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

在Vue3中，可以使用`<component>`标签来动态地渲染组件。在切换组件时，可以在`<component>`标签上使用`:is`属性来指定要渲染的组件。同时，可以使用`v-bind`指令来向组件传递数据。

以下是一个示例代码：

<template>
  <div>
    <button @click="showComponentA">显示组件A</button>
    <button @click="showComponentB">显示组件B</button>
    <component :is="currentComponent" :data="data"></component>
  </div>
</template>

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

export default defineComponent({
  components: {
    ComponentA,
    ComponentB,
  },
  setup() {
    const currentComponent = ref('ComponentA');
    const data = ref({ message: 'Hello, World!' });

    function showComponentA() {
      currentComponent.value = 'ComponentA';
      data.value = { message: 'Hello, ComponentA!' };
    }

    function showComponentB() {
      currentComponent.value = 'ComponentB';
      data.value = { message: 'Hello, ComponentB!' };
    }

    return {
      currentComponent,
      data,
      showComponentA,
      showComponentB,
    };
  },
});
</script>

在上面的代码中，我们使用了`<component>`标签来渲染两个组件`ComponentA`和`ComponentB`。在`<component>`标签上使用`:is`属性来指定当前要渲染的组件，并使用`:data`属性来向组件传递数据。在`setup`函数中，我们使用`ref`函数来定义状态变量`currentComponent`和`data`，并在`showComponentA`和`showComponentB`函数中更新它们的值，以便在切换组件时更新页面和向组件传递数据。