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

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