export/export default/import

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可以直接导出变量表达式