vue元件引入另一vue元件

2021-09-22 21:29:26 字數 498 閱讀 3526

個人blog,歡迎關注加收藏

在元件中引入另一組件

元件化開發,最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中

時,可以將其提出單獨組成乙個元件。重複使用。如下圖:其中底部導航條的部分

就會出現在多個元件中

在當前元件card.vue中引入barbottom.vue的步驟如下:

在card.vue中引入barbottom.vue:

import barbottom from './barbottom.vue'在card.vue的components屬性中宣告此元件:

components:
在card.vue中使用該元件:

動態引入vue元件

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

vue怎麼引入子元件

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

html頁面引入vue元件

html頁面引入vue元件需要在頁面引入http vue loader.js 注意 要檢視頁面引入vue元件的效果不能直接在本地開啟index.html,會有跨域問題,可以在本地配置乙個nginx 再用瀏覽器訪問http localhost port index.html 1.建立my compon...