Komponen vue3 js: komponen tidak dikemas kini

Question

Saya mempunyai komponen yang mengumpul data daripada API. Data yang dikembalikan daripada API ialah tatasusunan yang mengandungi butiran. Salah satu nilai dalam tatasusunan ialah jenis komponen yang perlu diberikan, semua data lain dihantar ke komponen. Saya cuba memberikan komponen yang betul berdasarkan nilai yang dibawa balik dari pangkalan data, tetapi malangnya ia tidak berfungsi. Saya baru menggunakan Vue tetapi ia berfungsi dalam vue2 tetapi berharap ia berfungsi dalam Vue 3 menggunakan API komposisi.

Ini adalah kod komponen yang ingin saya ganti:

<component :is="question.type" :propdata="question" />

Apabila dilihat dalam penyemak imbas, inilah yang sebenarnya dipaparkan, tetapi tanpa menggunakan komponen SelectInput:

<selectinput :propdata="question"></selectinput>

SelectInput ialah komponen direktori saya dan jika saya mengekod keras nilai :is ia berfungsi seperti yang diharapkan seperti ini:

<component :is="SelectInput" propdata="question" />

Komponen lengkap saya memanggil komponen component dan menukar komponen:

<template>
    <div class="item-group section-wrap">
        <div v-bind:key="question.guid" class='component-wrap'>
            <div class="component-container">
                <!-- working -->
                <component :is="SelectInput" :propData="question" />
                <!-- not working -->
                <component v-bind:is="question.type" :propData="question" />
            </div>
        </div>
    </div>
</template>

<script setup>

    import { defineProps, toRefs } from 'vue';

    import SelectInput from "./SelectInput";
    import TextareaInput from "./TextareaInput";

    const props = defineProps({
        question: Object,
    });

    const { question } = toRefs(props);

</script>

Answer 1

Jika nama fail komponen anda sama dengan penentu jenis pada objek yang dipersoalkan, maka anda boleh mengimportnya secara dinamik untuk menyimpan beberapa baris kod.

Ini juga membawa kepada kebolehskalaan yang lebih baik kerana jika anda mencipta lebih banyak jenis, anda tidak perlu menyentuh komponen ini lagi.

sssccc

Answer 2

Didapati kerana saya menggunakan komponen 脚本设置，所以组件未命名，因此组件 saya tidak tahu komponen mana yang hendak dipaparkan.

Jadi saya mencipta objek yang mengandungi komponen dan rujukan kepada komponen:

const components = {
        'SelectInput': SelectInput,
        'TextareaInput': TextareaInput
    };

Fungsi lain yang mengambil komponen yang saya ingin paparkan dan memautkannya ke komponen sebenar:

const component_type = (type) => components[type];

Kemudian dalam templat saya memanggil fungsi dan memberikan komponen yang betul:

Kod tetap penuh:

sssccc

Tidak pasti sama ada ini pendekatan yang betul, tetapi ia menghasilkan komponen yang betul sekarang.