How to use export default in es6

In es6, "export default" is used to export real-time bound functions, objects or primitive values ​​from the module. A file can only write an "export default" at the end to specify the default output for the module. Syntax is "export default function () {...}".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

How to use export default in es6

The export statement is used to export real-time bound functions, objects or primitive values ​​from the module so that other programs can import {foo, bar} from ' ./util/index' reference

There are two ways to export exports:

Named export export function FunctionName(){...} (each module contains any number)

Default export export default expression; (each module contains one)

export

You can write multiple exports in one file

Export in file a.js

export let name1 = '张三'; // 或者使用 var, const
export function FunctionName(){...}
export class ClassName {...}

Import in file b.js

import {name1,FunctionName,ClassName} from '../a.js';

Note that the following writing method will report an error:

// 报错
export 1;
// 报错
var m = 1;
export m;
// 报错
function f() {}
export f;

export default

A file can only have one export at the end default

Export externally in file a.js

const str = "export default的内容";
function FunctionName(){...}
class ClassName {...}
export default {str,FunctionName,ClassName}

In file b Import in .js

import name from '../a.js';
// 使用
console.log(name.str)
name.FunctionName();

The difference between export and export default

1. Both export and export default can be used to export constants, functions, files, Modules, etc.

2. In a file or module, there can be multiple exports. The export default only has one at the end of the file.

3. When exporting through export, add { }, export default is not required, and can be given any name

Detailed introduction

We know that export default{} is indispensable when learning VUE. But its meaning must be understood.

export default{}This is used when reusing components. Suppose we write a single page component file A and need to use it in another file B, then we need to use the ES6 import/export syntax to define the output interface export in file A and introduce import in file B. Use the imported components so that you can reuse component A to match file B to generate html pages.

When using the import command, the user needs to know the name of the variable or function to be loaded, otherwise it cannot be loaded. However, users definitely want to get started quickly, and may not be willing to read the documentation to understand what attributes and methods the module has. In order to provide convenience to users and allow them to load modules without reading the documentation, the export default command is used to specify the default output for the module.

1. Basic usage

//export-default.js 这是一个模块文件export-default.js，它的默认输出是一个函数
export default function () {
  console.log('foo');
}

//import-default.js
import customName from './export-default';
customName();  //'foo'
//这是的import命令，可以用任意名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。
// 需要注意的是，这时import命令后面，不使用大括号。

When other modules load the anonymous module, the import command can specify any name for the anonymous function.

2. The export default command is used before non-anonymous functions

// export-default.js
export default function foo() {
  console.log('foo');
}
 
// 或者写成
 
function foo() {
  console.log('foo');
}
 
export default foo;
//上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of How to use export default in es6. For more information, please follow other related articles on the PHP Chinese website!