ES6-Module-导出和导入

2020-07-23  本文已影响0人  泡杯感冒灵

导出多个(一个一个的导出)

// a.js
export function fn(){
  console.log('a')
}

export const name = "xiaoming"

export const obj = {
  name:"zhangsan"
}

同时导出多个

// b.js
function fn(){
  console.log('a')
}

const name = "xiaoming"

const obj = {
  name:"zhangsan"
}

// ES5的写法
export {
  fn:fn,
  name:name,
  obj:obj
}
//ES6的写法
export {
  fn,
  name,
  obj
}

当导出的是多个时,我们可以通过解构赋值的方式,导入

// import { fn, name, obj } from './a'
// fn()
// console.log(name)
// console.log(obj)

 import { fn, name, obj } from './b'
 fn()
 console.log(name)
 console.log(obj)

当只需要导出一个的时候,我们可以通过 export default

const obj2 = {
  name:'lisa'
}

export default obj2

这个时候导入的时候,就不能用解构赋值的方式了

import obj2 from './c'
console.log(obj2)

当然了,同时导出多个的时候,也是可以用export default的,只不过这样的话,就不能用解构赋值了

// b.js
function fn(){
  console.log('a')
}

const name = "xiaoming"

const obj = {
  name:"zhangsan"
}

export default{
  fn,
  name,
  obj
}

// index.js
import b from './b'
b.fn()
console.log(b.name)
console.log(b.obj)

总之,用export default导出,就不能用解构赋值导入

上一篇下一篇

猜你喜欢

热点阅读