export default用法_尝试从es6规范专业地聊聊export&import
时间: 2023-07-12 09:48:06 浏览: 79
在 ES6 中,我们可以使用 `export` 和 `import` 关键字来实现模块化开发。其中,`export` 关键字用于导出模块中的变量、函数、类等,`import` 关键字则用于导入其他模块中导出的变量、函数、类等。
在使用 `export` 关键字时,我们可以使用 `export default` 来导出模块中的一个默认值。这个默认值可以是任何类型的值,例如一个变量、一个函数、一个类等等。
下面是一个例子,我们定义了一个名为 `add` 的函数,并使用 `export default` 导出:
```javascript
function add(a, b) {
return a + b;
}
export default add;
```
在另一个模块中,我们可以使用 `import` 关键字来导入这个默认值:
```javascript
import add from './add.js';
console.log(add(1, 2)); // 输出 3
```
在这个例子中,我们使用 `import` 关键字来导入 `add.js` 模块中导出的默认值,并将其赋值给 `add` 变量。然后,我们调用 `add(1, 2)` 函数,输出结果为 3。
需要注意的是,一个模块中只能使用一次 `export default`,而且默认值是匿名的。如果我们希望导出多个值,或者希望导出一个命名的默认值,可以使用其他的 `export` 语法来实现。
相关问题
javascript es6中export、import与export default的用法和区别
在JavaScript ES6中,用export、import和export default关键字可以实现模块化编程。
export关键字用于导出一个或多个模块,可以导出变量、函数、对象等内容。
import关键字用于引入一个或多个模块,由于导出的内容是可命名的,因此必须指定被引入模块导出的名称,例如import { name } from "./module.js"。
export default关键字用于默认导出一个模块,一个模块只能有一个默认导出,如果需要导出多个模块,可以使用export关键字。默认导入模块时,可以任意指定名称,例如import myModule from "./module.js"。
区别在于export default只能导出一个模块,而export可以导出多个模块,通常用于导出变量、函数、对象等内容。import时,export需要指定名称,而export default可以任意指定名称。因此,当导出的模块只有一个时,建议使用export default。
export default用法vue_vue全家桶开发的一些小技巧和注意事项
`export default` 是一个 ES6 的模块导出语法,它用于导出一个模块的默认输出。在 Vue.js 开发中,我们可以使用 `export default` 来导出组件、指令、混入等模块。
下面是一些使用 `export default` 的小技巧和注意事项:
1. 单文件组件中使用 `export default` 导出组件对象:
```
<template>
<!-- 模板代码 -->
</template>
<script>
export default {
// 组件代码
}
</script>
<style>
/* 样式代码 */
</style>
```
2. 在一个 `.js` 文件中使用 `export default` 导出一个函数或对象:
```
// utils.js
export default {
// 工具函数
}
// 或者
export default function () {
// 函数代码
}
```
3. 在 `import` 语句中使用 `as` 关键字给导出的模块取别名:
```
import SomeComponent from './SomeComponent.vue'
import { someFunction as fn } from './utils.js'
```
4. 在 `import` 语句中使用 `* as` 语法导入一个模块中的所有导出,然后使用对象属性访问:
```
import * as utils from './utils.js'
utils.someFunction()
utils.someVariable
```
5. 在 Vue.js 组件中使用 `import` 导入其他模块:
```
<script>
import SomeComponent from './SomeComponent.vue'
import { someFunction } from './utils.js'
export default {
components: {
SomeComponent
},
methods: {
doSomething() {
someFunction()
}
}
}
</script>
```
这些是一些使用 `export default` 的小技巧和注意事项,希望对你有所帮助!
相关推荐
![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)
![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)