【Vue】export 导出用法

在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必须知道导出的变量或函数等，导入时变量名要一致