Komponen vue3 js: komponen tidak dikemas kini
P粉779565855
P粉779565855 2024-02-25 14:50:02
0
2
465

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>

P粉779565855
P粉779565855

membalas semua(2)
P粉388945432

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
P粉775788723

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan