Nuxt vue 基于参数/类型的显示组件

Question

我对 Nuxt 和 Vuejs 相当陌生。我已经被这个问题困扰了几天了，已经在谷歌上搜索了解决方案，但还没有找到任何..

我有一个带有组件

<VTextField></VTextField>

和

<VSwitch></VSwitch>

的页面，页面的示例代码如下

<script setup lang="ts">
    import { ref } from 'vue';
</script>
<template>
    <VTextField></VTextField>
    <VSwitch></VSwitch>
</template>

但是，我没有直接使用组件，而是需要遵循一个要求，即我有一个 API 可以为我提供“类型”，并根据“类型”值显示组件。

我尝试为此创建一个函数，代码如下。

utils/RenderComponent.ts

import { defineComponent } from 'vue';
import { VTextField } from 'vuetify/components';
import { VSwitch } from 'vuetify/components';

export function renderComponent(type: any) {
    switch (type) {
        case 'Text':
            return defineComponent({
                components: { VTextField },
                template: '<VTextField/>'
            });
        case 'switch':
            return defineComponent({
                components: { VSwitch },
                template: '<VSwitch/>'
            });
        default:
            throw new Error('Invalid component type');
    }
}

页面.vue

<script setup lang="ts">
    import { ref } from 'vue';
    import { renderComponent } from '~/utils/RenderComponent';
</script>
<template>
    <component :is="renderComponent('Text')" />

    <component :is="renderComponent('Switch')" />
</template>

但是代码不起作用。我希望有人能提供帮助并提前谢谢您！

Answer 1

您可以直接在模板中使用条件

<script setup lang="ts">
 import { ref } from 'vue';
 const componentType = ref('switch')
</script>
<template>
 <VTextField v-if="componentType === 'switch"></VTextField>
 <VSwitch v-else-if="componentType === 'textfield'"></VSwitch>
....
</template>