一.概念
ES6模块主要有两个功能:export和import
导出:export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
导入:import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文 件)。这几个都是ES6的语法。
在实际开发中,我们在项目开发自定义的工具类,java中很常见。在vue cli 中如果需要定义工具js文件,如何操 作
二、export 定义变量和函数
1 在src目录下创建src/assets/js目录,创建test.js文件,源码如下:
/* ES6语法,对这两个东西进行导出 */
/* 添加函数 */
export function add(){
alert("我是加法");
}
/* 创建变量 */
export var hello = "你好";
2 在任意组件中引入test.js文件
import {对象名 } from “目录名称/js文件名”
3 调用定义的方法或者变量
4.结果
三、export default 定义对象
一个对象的方式引入
1 在src/assets/js目录下创建目录,创建test01.js文件,js源码采用ES6方式定义对象和方法,
// 一个对象的方式,进行封装
var count = {
/* 定义add函数 */
add:function(){
alert("我是加法")
},
/* 定义变量 */
hello:"你好"
}
/* 导出对象 */
export default count
2 在.vue文件中引入工具类,语法:import 对象名 from “@/目录名称/js文件名”
3 使用工具类方法
四、总结
1、export default 向外暴露的成员,可以使用任意变量来接收
2、在一个模块中,export default 只允许向外暴露一次
3、在一个模块中,可以同时使用export default 和export 向外暴露成员
4、使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需导出】
5、export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义
6、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收