• 3分钟带你搞懂ES6 import 和 export


    如下语句是 default import:

    // B.js
    import A from './A'

    且只在A存在 default export 时生效:

    // A.js
    export default 42

    这种情况下你用import语句, 随便取什么名字都没关系:

    // B.js
    import A from './A'
    import MyA from './A'
    import Something from './A'

    因为他最终解析的是A.js 的 default export.


    如下是命名为A的 import :

    import { A } from './A'

    它只在A.js存在 具名export 时起作用, 像这样:

    // A.js
    export const A = 42

    这种情况下指定命名是有必要的, 因为你要从A.js的 export 里 import 即引入特定东西:

    // B.js
    import { A } from './A'
    import { myA } from './A' // 无效!
    import { Something } from './A' // 无效!

    要使引入生效, 你需要添加对应的 具名export :

    // A.js
    export const A = 42
    export const myA = 43
    export const Something = 44

    每个 module 只能有一个  default export, 但可以有任意多个 具名export, 也可以将它们放在一起引用:

    // B.js
    import A, { myA, Something } from './A'

    可以看到这里我们引入了 default export 并命名为A, 引入 A.js 的 myA 和 Something 这两个具名export

    // A.js
    export default 42
    export const myA = 43
    export const Something = 44

    import时我们还可以用 as 语句为他们起个别名:

    // B.js
    import X, { myA as myX, Something as XSomething } from './A'
  • 相关阅读:
    发张照片纪念下
    以用户为中心的SNS站点数据库设计及实现
    IT点评:腾讯帝国没落的开始从崇敬到平淡,改变从自己开始
    并发下常见的加锁及锁的PHP具体实现
    Ubuntu,Your Linux
    Python初尝试
    C++ Primer Plus读书笔记02
    C++ Primer Plus读书笔记03
    Effective C++读书笔记02
    由扔骰子看平均概率生成
  • 原文地址:https://www.cnblogs.com/skura23/p/7364642.html
Copyright © 2020-2023  润新知