So erstellen Sie dynamisch mehrere Komponentenkomponenten in vue3, indem Sie die eingehenden Komponentennamen durchlaufen

Hintergrund

Wenn Sie in vue3 eine Komponente verwenden, können Sie eine Komponente dynamisch laden, z. B.

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

Dadurch wird die bereits definierte und importierte Bildkomponente geladen, aber wenn Sie die benutzerdefinierten Komponenten, die angezeigt werden müssen, in ein Array einfügen Wenn die Anzeige durchlaufen wird, kann der Erfolg nicht angezeigt werden.

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

Der Anzeigeeffekt ist wie in der Abbildung dargestellt:

Lösung

Nach vielen Versuchen haben wir festgestellt, dass die übergeordnete Komponente der dynamisch erstellten Komponente zwar dynamisch importierte und registrierte untergeordnete Komponenten hat, die durchlaufene Komponente jedoch nicht angezeigt.

Ursache des Problems:

Beim Durchlaufen kann die importierte und in der aktuellen Komponente registrierte Komponente nicht erkannt werden. Es wird davon ausgegangen, dass die Komponente nicht registriert ist, was bedeutet, dass die auf dieser Seite registrierte Komponente erkannt werden kann. <image></image>
但是，单独直接使用<component :is="Image" />Lösung:

Verwenden Sie app.component, um die Komponente global zu registrieren. Dies wird wirksam, wenn Sie eine Schleife durchlaufen, um mehrere Komponenten zu erstellen.

Globale Erstellungsmethode:

// 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);

Das obige ist der detaillierte Inhalt vonSo erstellen Sie dynamisch mehrere Komponentenkomponenten in vue3, indem Sie die eingehenden Komponentennamen durchlaufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!