【Vue入門】頁面導入組件的兩種方式（六）

上一節主要講了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文件