export 和 export default区别

1,136 阅读1分钟
exportexport default均可用于导出常量、函数、文件、模块等

1. export

通过export方式导出,在导入时要加{ }
在一个文件或模块中,exportimport可以有多个
const name = 'zs'
const age = 11
const getPhone = () => {
  console.log('phone')
}
export var a = 10;
// 使用 as 关键字, `as` 关键字用来取别名, 可以使用使用 `as` 关键字避免冲突
export { name as newName, age, getPhone }

// 对应导入方式
import { newName, age, getPhone } from './export'
export default {
  data () {
  },
  created: function () {
    alert(newName)
    alert(age)
    getPhone()
  }
}

2. export default

通过 export default方式导入,在导入时不需要加 {}
在一个文件或模块中,export default只能有一个
export default后面不能跟constlet的关键词
模块化管理中一个文件就是一个模块,export可以导出多个方法和变量,export default只能导出当前模块,一个js文件中只支持出现一个
const address = '三亚'
export default {
  address
}

// 对应导入方式
import address from './exportDefault'
// 为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
// export default输出一个叫做default的变量,然后系统允许你为它取任意名字
import myAddress from './exportDefault'
export default {
  data () {

  },
  created: function () {
    console.log('address', address)
    console.log('address', myAddress)
  }
}