Cara untuk mencipta berbilang komponen komponen secara dinamik dalam vue3 dengan merentasi nama komponen masuk

Latar Belakang

Dalam vue3, jika anda menggunakan komponen, anda boleh memuatkan komponen secara dinamik, seperti

<!--   直接创建  -->
<component :is="Image" />

Ini akan memuatkan komponen Imej yang telah ditentukan dan diimport, tetapi jika Komponen tersuai yang perlu dipaparkan diletakkan dalam tatasusunan Jika paparan dilalui, paparan tidak akan berjaya.

<!-- 动态创建方式 1 -->
<div v-for="(comp, index) in realTimeComponent" :key="index">
    <component :is="comp" />
</div>

<!-- 动态创建方式 2-->
<component  v-for="(comp, index) in realTimeComponent" :key="index" :is="comp" />

rrree

Kesan paparan adalah seperti yang ditunjukkan dalam rajah:

Penyelesaian

Selepas banyak percubaan, saya mendapati bahawa walaupun saya terpaksa gunakan komponen induk bagi komponen yang dicipta secara dinamik Subkomponen telah diimport dan didaftarkan secara dinamik, tetapi Komponen yang dilalui tidak boleh dipaparkan.

Punca masalah:

Semasa traversal, komponen yang diimport dan didaftarkan dalam komponen semasa tidak boleh dikenali, dan ia akan dianggap bahawa komponen tidak didaftarkan, sekali gus memaparkan <image></image>
Walau bagaimanapun, ia terus Gunakan <component :is="Image" /> untuk mendaftarkan komponen ini pada halaman ini dan ia boleh dikenali.
Penyelesaian:

Gunakan app.component untuk mendaftarkan komponen secara global, yang akan berkuat kuasa apabila menggelung untuk mencipta berbilang komponen.
Kaedah penciptaan global:

<script setup>
import { ref } from "Vue";
import Image from "@/customComponents/Image.vue";
const realTimeComponent = ref(["Image"]);
</script>
或者
<script>
import { ref } from "Vue";
import Image from "@/customComponents/Image.vue";
export default {
        components: {
            Image,
        },
         setup(){
            const realTimeComponent = ref(["Image"]);
         }
}
</script>

Atas ialah kandungan terperinci Cara untuk mencipta berbilang komponen komponen secara dinamik dalam vue3 dengan merentasi nama komponen masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!