受信したコンポーネント名を走査して vue3 で複数のコンポーネントを動的に作成する方法

Background

vue3 では、コンポーネントを使用する場合、コンポーネントを動的にロードできます。たとえば、

<!--   直接创建  -->
<component :is="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>

表示効果は図に示すとおりです。

解決策

何度も試した結果、次のことが必要であることがわかりました。動的に作成されたコンポーネントの親コンポーネントを使用します。 サブコンポーネントは動的にインポートおよび登録されましたが、トラバースされたコンポーネントは表示できません。

問題の原因:

トラバーサル中に、現在のコンポーネントにインポートおよび登録されているコンポーネントが認識できないため、コンポーネントが登録されていないと見なされ、 が表示されます。 <image> image></image>
ただし、 <component :is="Image"></component> を直接使用してこのページにコンポーネントを登録することで認識できます。
解決策:

app.component を使用してコンポーネントをグローバルに登録します。これは、ループして複数のコンポーネントを作成するときに有効になります。
グローバル作成方法:

// 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 中国語 Web サイトの他の関連記事を参照してください。