vue3中通過(guò)遍歷傳入組件名稱(chēng)動(dòng)態(tài)創(chuàng)建多個(gè)component 組件
背景
在 vue3 中，如果使用 component，可以動(dòng)態(tài)加載一個(gè)組件，例如
<!-- 直接創(chuàng)建 --> <component :is="Image" />
這樣會(huì)將已經(jīng)定義好并導(dǎo)入的比如 Image 組件加載出來(lái)，但是如果將需要展示的自定義組件放在一個(gè)數(shù)組中，遍歷展示，則無(wú)法展示成功。
<!-- 動(dòng)態(tài)創(chuàng)建方式 1 -->
<div v-for="(comp, index) in realTimeComponent" :key="index">
<component :is="comp" />
</div>
<!-- 動(dòng)態(tài)創(chuàng)建方式 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>展示效果如圖：
解決
經(jīng)過(guò)多次嘗試發(fā)現(xiàn)，雖然要使用動(dòng)態(tài)創(chuàng)建組件的父組件里已經(jīng)動(dòng)態(tài)導(dǎo)入并注冊(cè)了子組件，但是始終無(wú)法顯示遍歷的Component 。
問(wèn)題原因：
在遍歷的時(shí)候，當(dāng)前組件中導(dǎo)入并注冊(cè)該組件無(wú)法識(shí)別，會(huì)認(rèn)為沒(méi)有注冊(cè)該組件，從而展示<image></image>
但是，單獨(dú)直接使用<component :is="Image" />該頁(yè)面中注冊(cè)該組件，是可以被識(shí)別的。
解決方案：
使用 app.component 全局注冊(cè)組件，循環(huán)遍歷創(chuàng)建多個(gè) component的時(shí)候可以生效。
全局創(chuàng)建方法：
// 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);問(wèn)題解決！
到此這篇關(guān)于vue3中通過(guò)遍歷傳入組件名稱(chēng)動(dòng)態(tài)創(chuàng)建多個(gè)component 組件的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)創(chuàng)建多個(gè)component 組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能
這篇文章主要介紹了ant-design-vue 實(shí)現(xiàn)表格內(nèi)部字段驗(yàn)證功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了使用vuepress搭建靜態(tài)博客的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁(yè)之間的聯(lián)動(dòng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07
Vue+Element的后臺(tái)管理框架的整合實(shí)踐
本文主要介紹了Vue+Element的后臺(tái)管理框架，在框架上，領(lǐng)導(dǎo)要用AdminLTE這套模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
nuxt 頁(yè)面路由配置,主頁(yè)輪播組件開(kāi)發(fā)操作
這篇文章主要介紹了nuxt 頁(yè)面路由配置,主頁(yè)輪播組件開(kāi)發(fā)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能(最新推薦)
我們?cè)赑roflie.vue實(shí)例中,有beforeRouteEnter、beforeRouteLeave兩個(gè)函數(shù)分別是進(jìn)入路由之前和離開(kāi)路由之后,我們可以在這兩個(gè)函數(shù)之內(nèi)進(jìn)行數(shù)據(jù)的請(qǐng)求,下面給大家分享Vue結(jié)合ElementUI實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求和頁(yè)面跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2024-05-05
本篇文章主要介紹了詳解Vue 非父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開(kāi)功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
前端vue2使用國(guó)密SM4進(jìn)行加密、解密具體方法
SM4是一種對(duì)稱(chēng)加密算法,類(lèi)似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫(kù)加密、網(wǎng)絡(luò)通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關(guān)于前端vue2使用國(guó)密SM4進(jìn)行加密、解密的相關(guān)資料,需要的朋友可以參考下2024-07-07