動態引入vue元件

2021-10-04 10:54:53 字數 501 閱讀 1670

乙個頁面是由多個元件組合而成的,這個頁面需要import多個元件,如果整個page.vue檔案裡面全是import不太美觀,新建乙個asyncloadcomp.vue元件用來動態引入元件,新建乙個index.js檔案用來引入所有元件檔案

page.vue

import asyncloadcomp from '../components/asyncloadcomp';

export default ,

data () , ],

};},

}

asyncloadcomp.vue

index.js

// 引入所有元件檔案

const base = ,

notice: (resolve) => ,

}export default object.assign({}, base)

動態引入元件

在頁面上建立標籤 主要使用的是非同步元件 使用多個時可以使用for迴圈進行建立 通過require.context方法獲取路徑下元件的物件 let requirecomponent require.context components fromitem 在當前目錄下查詢 false,不遍歷子資料夾 ...

vue元件引入另一vue元件

個人blog,歡迎關注加收藏 在元件中引入另一組件 元件化開發,最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時,可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...

vue怎麼引入子元件

第一步 例子是在aboutus.vue介面引入子元件sidefloating.vue,如下圖 第二步 給子元件sidefloating.vue命名乙個全域性的id 第三步 返回aboutus.vue頁面,引用sidefloating.vue子元件 如下圖 首先引入介面,indexfloating對應...