export 与 export default 使用方式
2019-08-19 本文已影响0人
Rising_life
在ES6中,使用export default 和 export 向外暴露成员
export default
export default 向外暴露的成员,可以使用任意变量来接收
export default 向外暴露成员
![](https://img.haomeiwen.com/i16375643/f85f711db1638665.png)
或
![](https://img.haomeiwen.com/i16375643/d7e1a684b2af0817.png)
main.ts 接收 test.ts使用export default 向外暴露的成员
![](https://img.haomeiwen.com/i16375643/39f0b2ad58b5fd10.png)
控制台输出
![](https://img.haomeiwen.com/i16375643/e61379112ab075f9.png)
在一个模块中,export default 只允许向外暴露一次
export
使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收
export向外暴露的成员
![](https://img.haomeiwen.com/i16375643/9f6fe3e399d0fbd9.png)
使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需接收】
![](https://img.haomeiwen.com/i16375643/bcc6d4bf120ea7c9.png)
控制台输出
![](https://img.haomeiwen.com/i16375643/8313350d397845c1.png)
export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义
export向外暴露多个成员
![](https://img.haomeiwen.com/i16375643/48f03cbc10ce4689.png)
或
![](https://img.haomeiwen.com/i16375643/d0e7fc7e91fd4b94.png)
不需要的成员,可以不在{ }中定义
![](https://img.haomeiwen.com/i16375643/3d15cfdad011bb3d.png)
控制台输出
![](https://img.haomeiwen.com/i16375643/6bc5dd89fbbdad45.png)
使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名
![](https://img.haomeiwen.com/i16375643/009ef6f885880d1e.png)
3、在一个模块中,可以同时使用export default 和export 向外暴露成员
export default 和export 向外暴露成员
![](https://img.haomeiwen.com/i16375643/19f47f3980ef34b3.png)
在main.js中接收,test.js使用export default 和 export 向外暴露的成员
![](https://img.haomeiwen.com/i16375643/892b6a3868a9b233.png)
使用export向外暴露的成员,只能使用{ }的形式来接收,这种形式,叫做【按需导出】