默认导出与命名导出

此文章来源于：Var_YanGuangYing

 

默认导出：

对于导出内容的命名无关紧要，只要给定名称即可，但默认导出只有一个。

 

命名导出：

导入时，名称必须与导出的名称一致，可以到处多个

 

1、默认导入示例：

// B.js--默认导入

import A from './A'

// A.js--默认导出

export default 42

以上这种默认导入仅限A.js文件中有默认导出时才有效。

 

在以下情况，导入时分配的名称并不重要：

// B.js

import A from './A'

import MyA from './A'

import Something from './A'

因为以上三种导入，始终解析的都是默认导出的A。

 

2、命名导出示例：

// B.js--命名导入

import { A } from './A'

仅在A.js包含名为A的命名导出时，才有效，即：

// A.js--命名导出

export const A = 42

这种情况下，名称就必须对应，因为需要通过导出名称来确定要导入的特定内容：

// B.js

import { A } from './A'

import { myA } from './A' // 不起作用！

import { Something } from './A' // 不起作用！

如上，A.js中并没有myA和Something这两个命名导出，所以如上的导入命令无效。为了让这两个导入起作用，需要在A.js中添加对应的命名出口。如下：

// A.js

export const A = 42

export const myA = 43

export const Something = 44

 

3、一个模块只能具有一个默认导出，但是可以具有任意数量的命名导出（0个，1个，2个，...）。在导入时可以全部导入。如下：

// B.js

import A, { myA, Something } from './A'

在这里，我们将默认导出导入为A，并将命名导出分别按照其命名导出

// A.js

export default 42

export const myA = 43

export const Something = 44

4、导入时，我们还可以为命名导出分配不同的名称，如下：

// B.js

import X, { myA as myX, Something as XSomething } from './A'

默认导出通常用于通常希望从模块中获取的内容。命名出口通常用于方便的实用程序，但并不总是必需的。但是，由您决定如何导出内容：例如，一个模块可能根本没有默认导出。