vue.js学习笔记二十 九——export default与export的使用方式

1. ES6与Node中导入与暴露成员的方式

1.1 使用Node暴露与导入的方式

1.1.1 导入

在Node中使用 var 名称 = require('模块标识符'); 来导入成员

1.1.2 暴露成员

moudle.exports={} 和 exports来暴露成员

1.2 使用ES6方式暴露成员与导入模块

在ES6中，也通过规范的形式，规定了ES6中如何导入和导出模块

1.2.1 导入

ES6中导入模块，使用 import 模块名称 from '模块标识符' 或者 import '标识路径'

1.2.2 暴露成员

在ES6中使用export default 和 export向外暴露成员

案例：

1. 新建一个test.js文件

export default{
    name:'张三',
    age:21
}

/** 也可以这样暴露
var info = {
    name:'张三',
    age:21
}

export default info;
*/

2. 在main.js中导入test.js文件

import m1 from './test.js';
alert(m1.name);

项目打包运行，弹出张三

注意：

1. 在main.js文件 import 模块名称  这个模块名称是自定义的，也就是说通过export default暴露的成员可以使用任意的变量来接收。

2. 在一个模块中，只允许export default向外暴露一次

3. 在一个模块中，可以同时使用export default和export向外暴露成员

4. 通过“export var 变量名 = 内容” 形式向外暴露的接口，只能通过 {模块名}的形式来接收，这种方式，叫做【按需导出】且，模块名必须和export的变量名保持一致，如果不想一致怎么办？可以通过{模块名 as 自定义名称}的形式

5. export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候不需要，则可以不在{}中定义，意思是，即使你向外通过export暴露了多个成员，我也可以在import 的时候，在{}中，引入一个或者多个，这种方式就是按需导入。

例如：

在test.js中暴露两个成员

export default{
    name:'张三',
    age:21
}

export var info = {
    name:'李四',
    age:22
};

export var content = '你好 export！';

在main.js中接收

import m1,{info,content} from './test.js';
alert(m1.name);
alert(info.name);
alert(content);