export 和 export default 的差别

最新推荐文章于 2024-07-19 10:45:40 发布

原创最新推荐文章于 2024-07-19 10:45:40 发布 · 549 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #react.js

react.js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中export和export default的区别。export用于有名称的模块接口输出，可以输出变量、函数、类，需要import时名称对应。export default则允许模块有一个默认输出，无需指定名称，import时可自定义名称。总结关键在于：export多用于多个接口，import需匹配；export default用于单一默认输出，import更灵活。

export用于规定模块的对外接口，当外部文件需要使用该组件时，需要使用export输出。（可以用于输出变量、函数、类）

export
export命令对外接口必须是有名称的，如：

//在Writing.tsx
export function Title(prop:any){
    return <h1>{prop.name}</h1>
}
export function  Content(prop:any){
    return <h1>{prop.content}</h1>
}

当使用import命令从模块导入时，可以用一对大括号，里面是需要导入的变量名（注意：变量名与被导入模块对外接口的名称相同，需要多个时，用逗号分隔），若是需要重新指定变量名，则使用as关键字，如下：

import { Title, Content } from "@/components/common/Writing";

//需要指定变量名时，使用as关键字
import { Title as Writingtitle } from "@/components/common/Writing";

而export default命令对外输出的变量名可以是任意的，这时import命令后面，不使用大括号。

export default
当使用export default 时，一个模块只能有一个 默认输出，因此可以不指定对外输出的名称，如下：

//hello.tsx
//可以指定名称，也可以不指定名称，也可以使用箭头函数
export default (props:any)=>{
    return <h1>Hello, {props.name}</h1>;
}

使用import时不需要加大括号，并可以直接指定一个函数名称而不需要使用原来的输出名称，如下：

//example.js
//import 导入时可以直接指定一个函数名称
import Hello from "@/components/hello";

export default function Example() {
  return (
    <>
      <Hello name="Liz"></Hello>
    </>
  );
}

综上，
1. 变量名：
export 必须指定输出名称，import输入时必须和输出名称一致或使用as关键字指定
export default 可以任意指定输出名称，也可以不指定，import时可以用任意名称
2. 唯一性
export 可以有多个，import引入时需要使用大括号
export default 为默认输出，一个模块只能有一个，因此import导入时，因为唯一性不需要使用大括号