ES6中import和export的使用

目录

1.介绍import、export

2.import的使用

3.export的使用

4.import不加{ }和加 { }的两种写法的差异

  4.1 不使用 { }

  4.2 使用{ }

5.总结

---

1.介绍import、export

ES6中使用了 import 和 export 关键字来实现模块的导入、导出，在项目中很常用

2.import的使用

import可以用于导入.css、.js、.json、.vue等文件

在引入某个页面的数据时，例如引入某个工具类的方法

import { getYearAndMonth } from "../../utils/getYearAndMonth";

使用import时，会有不加{}   和加 {}的两种写法，用法上也有一定的差异，在后面会写到

3.export的使用

export用于导出我们封装的文件，一般是封装好的工具类或者是接口相关内容

效果如下，这里使用export 默认导出了我们封装好的工具类 ，获取年+月格式字符串

4.import不加{ }和加 { }的两种写法的差异

  4.1 不使用 { }

例如，在上面这个utils文件夹中 ，我们默认导出了getYearAndMonth

有默认导出，在import导入时可以省略 { }

  4.2 使用{ }

如果上方模块 没有默认导出  export default getYearAndMonth

必须在import时加入 { }，比如：

import { getYearAndMonth } from "../../utils/getYearAndMonth";

在引入多个函数方法时：比如

import { getYearAndMonth, getYearAndMonth1 } from "../../utils/getYearAndMonth";

则必须加上 { }，否则无法正常使用该模块

5.总结

1.export有默认导出时，可不加{ }，导出默认内容

2.export没有默认导出时，import引入方法必须加入{ }

3.调用单个方法时，可使用默认导出。在实际使用时，推荐加入{ }，会使得我们调用时更加清晰