如何使用ES6模块export,export default和import

古城微笑少年丶 2021-11-05 19:18 536阅读 0赞

ES6使用 export 和 import 来导出、导入模块，也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。使用export default命令，为模块指定默认输出。

## 1. 变量的导入，导出 ##

//api.js  导出
    var age= 13
    var name = '小红'
    export {age,name}// 使用export导出
    export default age// 使用export default导出

//vue组件中导入
    import { age,name } from "/.api.js" //使用export导入
    import  age from "/.api.js" // export default导入
    export default {
      data () {
        return { }
      },
      created:function(){
      console.log(name)//输出来“小红”
     console.log(age)//输出来“13”
      }
     }

## 2. 函数的导入导出 ##

function add(x,y){
       console.log(x+y)
    }
    export { add }//使用export 将functiond导出
    export default add// 使用export default将functiond导出

import { add } from "/.api.js" //将之前export导出的结果导入
    import  add from "/.api.js" // 将之前export default导出的结果导入
    export default {
      data () {
        return { }
      },
      created:function(){
       add(4,6) //输出来10
      }
     }

**总结：**  
1. export与export default均可用于导出常量、函数、文件、模块等.  
2. 在一个文件或模块中，export、import可以有多个，export default仅有一个.  
3. 通过export方式导出，在导入时要加\{ \}，export default则不需要.

本文转载自;[https://blog.csdn.net/dt1991524/article/details/86497449][https_blog.csdn.net_dt1991524_article_details_86497449]

[https_blog.csdn.net_dt1991524_article_details_86497449]: https://blog.csdn.net/dt1991524/article/details/86497449