上一節主要講了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檔案