Comment créer dynamiquement plusieurs composants dans vue3 en parcourant les noms de composants entrants

Arrière-plan

Dans vue3, si vous utilisez un composant, vous pouvez charger dynamiquement un composant, tel que

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

Cela chargera le composant Image déjà défini et importé, mais si vous placez les composants personnalisés qui doivent être affichés dans un tableau , si l'affichage est parcouru, le succès ne peut pas être affiché.

<!-- 动态创建方式 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" />

<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>

L'effet d'affichage est comme indiqué sur la figure :

Solution

Après de nombreuses tentatives, il a été découvert que bien que le composant parent du composant créé dynamiquement ait des composants enfants importés et enregistrés dynamiquement, le composant traversé ne peut pas être affiché.

Cause du problème :

Lors du parcours, le composant importé et enregistré dans le composant actuel ne peut pas être reconnu. Il sera considéré que le composant n'est pas enregistré, montrant ainsi que le composant enregistré dans cette page peut être reconnu. <image></image>
但是，单独直接使用<component :is="Image"></component>Solution :

Utilisez app.component pour enregistrer le composant globalement, ce qui prendra effet lors de la boucle pour créer plusieurs composants.

Méthode de création globale :

// src/customComponents/index.js
import Button from "@/customComponents/Button.vue";
import Text from "@/customComponents/Text.vue";
import Icon from "@/customComponents/Icon.vue";
import Image from "@/customComponents/Image.vue";
const components = {
    install: function (app) {
        app.component("Button", Button).component("Text", Text).component("Icon", Icon).component("Image", Image);
    },
};
export default components;

// main.js
import components from "@/customComponents";
app.use(components);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!