【Vue入門】頁面匯入元件的兩種方式(六)
阿新 • • 發佈:2020-10-26
上一節主要講了Home頁面的佈局及元件的引入
這節講元件的引入方式
一、第一種寫法:
1、在components資料夾--新建--navMenu.vue
2、在要引用元件的頁面引入元件
<el-container> <el-aside> <myMenu /> </el-aside> <el-main> main </el-main> </el-container> </el-container> <script> import myMenu from "@/components/navMenu"; export default { data() { }, components: { myMenu, }, }; </script>
二、第二種寫法:
1、在components資料夾--新建資料夾home,在home資料夾中新建--navMenu.vue
2、在home資料夾中新建index.js檔案,內容如下 如果home資料夾有其他的元件,那麼index.js中增加相應的別名就可以
export { default as myMenu } from './navMenu'
3、在要引用元件的頁面引入元件
<el-container> <el-aside> <myMenu /> </el-aside> <el-main> main </el-main> </el-container> <script> import { myMenu } from "@/components/home"; export default { data(){ }, components: { myMenu, }, };</script>
兩種方式的優缺點:
第一種寫法簡單,但是如果同一個頁面引入多個元件,需要多次寫入import來匯入對應的檔案
第二種寫法稍複雜,但是如果同一個頁面引入多個元件,只需要在index.js中註冊,然後在主頁面引用時在
import { myMenu } from "@/components/home";
里加入index.js檔案裡給起的別名就可以了
比如:import {myMenu,myHeader} from"@/components/home";
對應的在index.js中增加
export { default as myHeader } from './navHeader',同時在對應的資料夾下新增你的navHeader.vue檔案