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....
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);
更多推荐
所有评论(0)