export default怎么用
时间: 2024-01-10 07:21:58 浏览: 26
export default 是ES6模块系统中用于导出默认成员的关键字。它可以用于导出一个默认的函数、对象、类或者变量。下面是一个使用 export default 的示例:
```javascript
// test.js
var info = { name: 'zs', age: 20 }
export default info
```
在上面的示例中,我们定义了一个名为 info 的对象,并使用 export default 导出它。这意味着在其他模块中导入 test.js 时,可以直接使用默认导出的成员。
```javascript
// main.js
import info from './test.js'
console.log(info); // 输出:{ name: 'zs', age: 20 }
```
在上面的示例中,我们使用 import 语句导入了 test.js 模块,并将默认导出的成员赋值给了变量 info。然后我们打印了 info 的值,结果为 { name: 'zs', age: 20 }。
需要注意的是,一个模块只能有一个默认成员,但可以有多个命名导出的成员。如果一个模块既有默认导出又有命名导出,可以使用以下语法同时导出它们:
```javascript
// test.js
var info = { name: 'zs', age: 20 }
var title = '小星星'
var content = '哈哈哈'
export { title, content }
export default info
```
在上面的示例中,我们同时导出了一个默认成员 info 和两个命名导出的成员 title 和 content。在其他模块中导入时,可以使用以下语法:
```javascript
// main.js
import info, { title, content } from './test.js'
console.log(info); // 输出:{ name: 'zs', age: 20 }
console.log(title); // 输出:小星星
console.log(content); // 输出:哈哈哈
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)