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

honey缘木鱼

发布于 2019-02-21 17:14:21

1.1K0

发布于 2019-02-21 17:14:21

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

变量的导入，导出

//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”
  }
 }

函数的导入导出

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.01.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

default