es6에서 내보내기 기본값을 사용하는 방법

es6에서 "export default"는 모듈에서 실시간 바인딩된 함수, 객체 또는 기본 값을 내보내는 데 사용됩니다. 파일은 모듈의 기본 출력을 지정하기 위해 끝에 "export default"만 쓸 수 있습니다. . 구문은 "기본 함수 내보내기() {...}"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 내보내기 기본값을 사용하는 방법

export 문은 모듈에서 실시간 바인딩된 함수, 객체 또는 기본 값을 내보내 다른 프로그램이 import {foo, bar} from '를 통해 참조할 수 있도록 하는 데 사용됩니다. /util/index'

내보내기를 내보내는 방법에는 두 가지가 있습니다:

명명된 내보내기 내보내기 함수 FunctionName(){...} (각 모듈에는 임의의 숫자가 포함됨)

기본 내보내기 내보내기 기본 표현식(각 모듈에는 하나가 포함됨)

export

한 파일에 여러 개의 내보내기를 작성할 수 있습니다.

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';

다음 쓰기 방법은 오류를 보고합니다.

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

내보내기 기본값

파일은 끝에 하나의 내보내기 기본값만 쓸 수 있습니다

파일 a.js로 내보내기

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

파일 b.js로 가져오기

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

내보내기와 내보내기 기본값의 차이점

1. 내보내기 및 내보내기 기본값은 상수, 함수, 파일, 모듈 등을 내보내는 데 사용할 수 있습니다.

2 파일이나 모듈에는 여러 개의 내보내기가 있을 수 있으며 내보내기 기본값은 끝에 하나만 있습니다. 파일

3. 내보내기를 통해 내보내기, 가져올 때 { }를 추가해야 합니다. 내보내기 기본값은 필요하지 않으며 원하는 대로 이름을 지정할 수 있습니다.

자세한 소개

내보내기 기본값{}이 필수라는 것을 알고 있습니다. VUE를 배울 때 그 의미를 이해해야 합니다.

export default{} 이는 구성 요소를 재사용할 때 사용됩니다. 단일 페이지 구성 요소 파일 A를 작성하고 이를 다른 파일 B에서 사용해야 한다고 가정하면 ES6 가져오기/내보내기 구문을 사용하여 파일 A에서 출력 인터페이스 내보내기를 정의하고 파일 B에서 가져오기를 도입해야 합니다. 가져온 구성 요소 사용 구성 요소 A를 재사용하여 파일 B와 일치시켜 html 페이지를 생성할 수 있습니다.

import 명령을 사용할 때 사용자는 로드할 변수나 함수의 이름을 알아야 합니다. 그렇지 않으면 로드할 수 없습니다. 그러나 사용자는 확실히 빨리 시작하기를 원하며 모듈에 어떤 속성과 메서드가 있는지 이해하기 위해 설명서를 읽지 않을 수도 있습니다. 사용자에게 편의를 제공하고 문서를 읽지 않고도 모듈을 로드할 수 있도록 하기 위해 기본 출력 명령을 사용하여 모듈의 기본 출력을 지정합니다.

1. 기본 사용법

//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命令后面，不使用大括号。

다른 모듈이 익명 모듈을 로드할 때 import 명령은 익명 함수의 이름을 지정할 수 있습니다.

2. 내보내기 기본 명령은 비익명 기능 이전에 사용됩니다

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

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 es6에서 내보내기 기본값을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!