ES6使用export(导出)/import(导入)模块
1. export.js模块,使用export命令对外部输出了3个变量
export let name="anna";
export let age = 20;
export let sex="woman";
这个export.js还有另一种写法
let name="anna";
let age = 20;
let sex="woman";
export {name,age,sex};
export还可以输出函数
export const add = (x,y) => {
return x+y;
}
export还可以使用as关键字对输出的变量重命名
export {
name as newname,
age as newage,
sex as newsex
};
2. import.js
import导入在文件里使用
import {name,age} from 'export.js'
mounted(){
console.log(name,age);
}
import也可以为导入的模块变量重命名,export.js后面的.js可以省略
import {name as newname} from 'export'
注意,import命令具有提升效果,会提升到整个模块的头部,首先执行
模块除了单个加载外还可以整体加载
import {name,age} from 'export'
import * as person from 'export.js'
使用:person.name; person.age
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
3. export default 命令 为模块指定默认输出
export-default.js
export default function(){
return 100
}
或者:
function num(){
...
}
export default num;
num函数名在外部是无效的
使用:其他模块加载该模块时,import
命令可以为该匿名函数指定任意名字。需要注意的是,这时import
命令后面,不使用大括号。
import numberName from 'export-default'
numberName();//函数执行
export和export default的区别:
1 使用export default时,对应的import语句不需要使用大括号{},使用export则需要{}
2 export default用于指定模块的默认输出,一个模块只能有一个默认输出。
因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。而export可以有多个,且export可以直接导出变量表达式