vue3 では、コンポーネントを使用する場合、コンポーネントを動的にロードできます。たとえば、
これにより、すでに定義されインポートされた画像コンポーネントがロードされますが、カスタム コンポーネント表示する必要があるものは配列に配置されているため、表示を横断すると表示は成功しません。
或者
表示効果は図に示すとおりです。
何度も試した結果、次のことが必要であることがわかりました。動的に作成されたコンポーネントの親コンポーネントを使用します。 サブコンポーネントは動的にインポートおよび登録されましたが、トラバースされたコンポーネントは表示できません。
トラバーサル中に、現在のコンポーネントにインポートおよび登録されているコンポーネントが認識できないため、コンポーネントが登録されていないと見なされ、が表示されます。
ただし、
解決策:
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 サイトの他の関連記事を参照してください。