JavaScript ES6中export及export default的区别
在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,我们可以在其它文件或模块中通过
import 常量名/函数名/文件名/模块名
的方式,将其导入进行使用,但在一个文件或模块中,export、import可以有多个,但export default仅有一个
使用export
我们在config.js文件中配置了多个值,都想导出给vue页面使用,使用export
// config.js
var name1 = "小明"
var name2 = "小明"
export { name1, mame2 }
export const str = "Hello world"
export function fun(n) {
return n+1
}
export const list = [
{
title: 'PCT国际专利申请量',
number: '20,209',
unit: '件',
},
{
title: '国家级高新科技企业数',
number: '20,209',
unit: '件',
}
]
vue页面对应的导入方式必须带花括号 {}
,而且花括号里的变量名必须与config.js文件中定义的变量名一致
import { name1, name2 } from 'config'
import { str } from 'config'
import { fun } from 'config'
import { list } from 'config'
或者
import { str, fun, list } from 'config'
使用export default
export default
这相当于起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default
,这个命令常用于指定模块的默认输出,即当前这个模块只能有一个默认输出,例如下面我们在config.js文件中使用export default
只能导出一个值
// config.js
const list = [
{
title: 'PCT国际专利申请量',
number: '20,209',
unit: '件',
},
{
title: '国家级高新科技企业数',
number: '20,209',
unit: '件',
}
]
export default list
或者
// config.js
export default list = [
{
title: 'PCT国际专利申请量',
number: '20,209',
unit: '件',
},
{
title: '国家级高新科技企业数',
number: '20,209',
unit: '件',
}
]
vue页面对应的导入方式不带花括号,而且export default
相当于输出了一个叫default的变量,系统允许我们为其取任意名字,故import导入时可随意取名
import list from 'config'
或
import xxoo from 'config'
注意事项
export default
与普通的export
不要同时使用
JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别JavaScript ES6中export及export default的区别