【Vue】export 导出用法
在JavaScript ES6中,**export** 与 **export default** 均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过 **import+(常量 | 函数 | 文件 | 模块)名** 的方式,将其导入,以便能够对其进行使用...
·
在JavaScript ES6中,export 与 export default 均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块)名 的方式,将其导入,以便能够对其进行使用
一、export 的使用
- 定义一个
test.js
文件
export function a(){
console.log('a');
}
export function b(){
console.log('b');
}
export let c = 3;
- 在
index.js
文件进行导入操作
// 这里的 a b c 必须以导出变量一致,不能瞎取名
import {a,b,c} from './test.js'
a(); // a
b(); // b
console.log(c); //3
-----------------------------------------------
//可以使用as设置别名,* 号表示所有
import * as test from './test.js'
test.a(); // a
test.b(); // b
console.log(test.c); //3
-----------------------------------------------
//可以使用as设置别名,设置单个
import {a,b as bb,c} from './test.js'
a(); // a
bb(); // b
console.log(c); //3
二、export default 的使用
- 定义一个
test.js
文件
export default{
a:function(){
console.log('a');
},
b:function(){
console.log('b');
},
c : 3
}
- 在
index.js
文件进行导入操作
// 这里的 zdy 可以自定义的任何变量,自己取名
import zdy from './test.js'
zdy.a(); // a
zdy.b(); // b
console.log(zdy.c); //3
三、两者之间的区别
区别 1:
- 一个js文件是可以有多个
export
,但是只能有一个export default
区别 2:
- 通过
export
方式导出,在导入时要加{}
,export default
则不需要
区别 3:
- 使用
export default
为模块指定默认输出,导入时只需知道文件名即可,但是使用export
必须知道导出的变量或函数等,导入时变量名要一致
更多推荐
已为社区贡献8条内容
所有评论(0)