VUE中的export default和export使用方法解析

export default和export的区别

export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。

import就是在一个模块中加载另一个含有export接口的模块， import就是导入。

export default和export都能导出一个模块里面的常量，函数，文件，模块等，在其它文件或模块中通过import来导入常量，函数，文件或模块。这样就可以使用它们了。但是，在一个文件或模块中，export,import可以有多个，export default却只能有一个。

通过export方式导出，在导入的时候需要加{}大括号，export default 就不需要{}。

export default简单示例

导出：

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

接收：
代码中的test.js为上面的代码文件；aaa可以任意命名，可以在控制台输出info对象

import aaa,  from './test.js'
console.log(aaa)

注意：

1、export default 向外暴露的成员，可以使用任意变量来接收

2、在一个模块中，export default 只允许向外暴露一次

3、在一个模块中，可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】

5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

代码示例

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info
 
export var title = '小星星'
 
export var content = '哈哈哈'

在下面代码中接收，test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);