vue3 ts 根据参数加载不同的组件

你可以使用动态组件和props来实现根据参数加载不同的组件。具体实现步骤如下：

1. 定义组件props来接收参数，例如：

interface ComponentProps {
  componentType: string;
}

2. 在父组件模板中使用动态组件，并根据传入的参数设置不同的组件。例如：

<template>
  <component :is="currentComponent" :componentType="componentType" />
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB,
  },
  props: {
    componentType: String,
  },
  computed: {
    currentComponent() {
      switch (this.componentType) {
        case 'typeA':
          return 'ComponentA';
        case 'typeB':
          return 'ComponentB';
        default:
          return null;
      }
    },
  },
};
</script>

在上面的代码中，我们通过computed属性根据传入的componentType参数来返回对应的组件。component标签的is属性用于设置当前渲染的组件。

3. 在子组件中使用props接收参数，例如：

<template>
  <div>{{ componentType }} component</div>
</template>

<script>
import { defineComponent, PropType } from 'vue';

interface ComponentProps {
  componentType: string;
}

export default defineComponent({
  props: {
    componentType: {
      type: String as PropType<ComponentProps['componentType']>,
      required: true,
    },
  },
});
</script>

在上面的代码中，我们使用defineComponent函数定义了子组件，并通过props接收了componentType参数。

最后，你可以在父组件模板中使用这个动态组件，并传入不同的componentType参数，例如：

<template>
  <div>
    <button @click="showTypeA">Show Component A</button>
    <button @click="showTypeB">Show Component B</button>
    <component-loader :componentType="currentComponentType" />
  </div>
</template>

<script>
import ComponentLoader from './ComponentLoader.vue';
import { defineComponent, reactive } from 'vue';

interface AppData {
  currentComponentType: string;
}

export default defineComponent({
  components: {
    ComponentLoader,
  },
  setup() {
    const data = reactive<AppData>({
      currentComponentType: '',
    });

    function showTypeA() {
      data.currentComponentType = 'typeA';
    }

    function showTypeB() {
      data.currentComponentType = 'typeB';
    }

    return {
      ...data,
      showTypeA,
      showTypeB,
    };
  },
});
</script>

在上面的代码中，我们定义了一个父组件，并在模板中使用了两个按钮来切换显示不同的组件。通过修改currentComponentType属性来切换显示不同的组件。