【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文件