美文网首页
export 与export default

export 与export default

作者: YellowPoint | 来源:发表于2019-09-25 16:19 被阅读0次
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <script src="export-1.js" type="module"></script>
    </body>
    

    export {a as default} from './export-3.js';

    //export-1.js
    import a from './export-2.js'
    console.log(a)
    
    //export-2.js
    export {a as default} from './export-3.js';
    //等同于
    export {a} from './export-3.js';
    export default a
    
    //export-3.js
    let a = 2
    export {a}
    

    export {default as b} from './export-3.js';

    //export-1.js
    import {b} from './export-2.js'
    console.log(b)
    
    //export-2.js
    export {default as b} from './export-3.js';
    
    //export-3.js
    let a = 2
    export default a
    

    import b from './export-3.js'

    //export-1.js
    import b from './export-2.js'
    console.log(b)
    
    //export-2.js
    import b from './export-3.js'
    export default b
    
    //export-3.js
    let a = 2
    export default a
    
    //export-1.js
    import cc from './export-2.js'
    let {b}=cc
    console.log(b)
    
    //export-2.js
    import b from './export-3.js'
    const cc = {b}
    export default cc
    
    //export-3.js
    let a = 2
    export default a
    

    import上的{} 是去取export的值;没有{}则是取export default;不能理解成简单的对象解构

    ES6 export && export default 差异总结

    1. export default 在一个模块里只能有一个,但是export可以有多个

    2. 模块中通过export 导出的(属性或者方法)可以修改,但是通过export default导出的不可以修改

    3. 如果想修改默认导出的值,可以使用export {e1 as default}这种方法。

    ECMAScript 6 入门--Module 的语法

    1. export 与 import 的复合写法

    相关文章

      网友评论

          本文标题:export 与export default

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