들어오는 구성 요소 이름을 순회하여 vue3에서 여러 구성 요소 구성 요소를 동적으로 생성하는 방법

Background

vue3에서는 컴포넌트를 사용하면

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

와 같은 컴포넌트를 동적으로 로드할 수 있습니다. 이렇게 하면 이미 정의되어 가져온 Image 컴포넌트가 로드되지만 표시해야 하는 사용자 정의 컴포넌트를 배열에 넣으면 , 디스플레이를 순회하면 성공을 표시할 수 없습니다.

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

표시 효과는 그림과 같습니다.

Solution

동적으로 생성된 구성 요소의 상위 구성 요소가 하위 구성 요소를 동적으로 가져오고 등록했음에도 불구하고 순회된 구성 요소는 표시됩니다.

문제 원인:

트래버스 시 현재 컴포넌트에 import되어 등록된 컴포넌트를 인식할 수 없습니다. 해당 컴포넌트가 등록되지 않은 것으로 간주되어 이 페이지에 등록된 컴포넌트를 인식할 수 있다고 표시됩니다. <image></image>
但是，单独直接使用<component :is="Image" />해결책:

app.comComponent를 사용하여 구성 요소를 전체적으로 등록하세요. 이는 여러 구성 요소를 만들기 위해 반복할 때 적용됩니다.

전역 생성 방법:

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

위 내용은 들어오는 구성 요소 이름을 순회하여 vue3에서 여러 구성 요소 구성 요소를 동적으로 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!