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

你可以使用 Vue3 的 `<component>` 组件来动态切换两个组件，并通过 props 传值给组件。

首先，你需要在页面中定义两个组件：

// ComponentA.vue
<template>
  <div>
    <p>Component A</p>
    <p>{{ message }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
});
</script>

// ComponentB.vue
<template>
  <div>
    <p>Component B</p>
    <p>{{ count }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    count: {
      type: Number as PropType<number>,
      required: true,
    },
  },
});
</script>

然后，你可以在页面中使用 `<component>` 组件来动态切换这两个组件，并通过 props 传值：

<!-- App.vue -->
<template>
  <div>
    <component :is="currentComponent" :message="message" :count="count" />
    <button @click="switchComponent">Switch Component</button>
  </div>
</template>

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

export default defineComponent({
  components: {
    ComponentA,
    ComponentB,
  },
  setup() {
    const state = reactive({
      currentComponent: 'ComponentA',
      message: 'Hello, World!',
      count: 0,
    });

    const switchComponent = () => {
      state.currentComponent = state.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
      state.count++;
    };

    return {
      ...state,
      switchComponent,
    };
  },
});
</script>

这里使用了 Vue3 的 Composition API 来定义页面组件，并使用 `reactive` 来定义一个响应式对象来存储组件状态。`switchComponent` 方法用于切换两个组件，并且每次切换都会增加 `count` 的值。在模板中，通过 `:is` 来动态切换组件，同时通过 `:message` 和 `:count` 来传递值给组件。