目录
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.调用单个方法时,可使用默认导出。在实际使用时,推荐加入{ },会使得我们调用时更加清晰