美文网首页
ES6-Module-导出和导入

ES6-Module-导出和导入

作者: 泡杯感冒灵 | 来源:发表于2020-07-23 10:11 被阅读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导出,就不能用解构赋值导入

    相关文章

      网友评论

          本文标题:ES6-Module-导出和导入

          本文链接:https://www.haomeiwen.com/subject/mteclktx.html