如何使用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
export default add// 使用export default

 

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则不需要.