es6 でエクスポートのデフォルトを使用する方法

es6 では、「デフォルトのエクスポート」は、モジュールからリアルタイムにバインドされた関数、オブジェクト、またはプリミティブ値をエクスポートするために使用されます。デフォルトを指定するには、ファイルの最後に「デフォルトのエクスポート」のみを記述することができます。モジュールの出力。構文は「export default function () {...}」です。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 でエクスポート デフォルトを使用する方法

エクスポート ステートメントは、他のプログラムが {foo, をインポートできるように、モジュールからリアルタイムにバインドされた関数、オブジェクト、またはプリミティブ値をエクスポートするために使用されます。 bar} from ' ./util/index' Reference

エクスポートをエクスポートするには 2 つの方法があります:

名前付きエクスポート エクスポート関数 FunctionName(){...} (各モジュールには任意の番号が含まれます)

Default エクスポートのデフォルトの式; (各モジュールに 1 つが含まれます)

export

複数のエクスポートを 1 つのファイルに記述できますfile

ファイル a.js

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

にエクスポート b.js

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

次の記述方法ではエラーが報告されることに注意してください:

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

エクスポート デフォルト

##ファイルには最後にエクスポートを 1 つだけ含めることができます。 デフォルト

##ファイル 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. ファイルまたはモジュールでは、複数のエクスポートが可能です。エクスポートのデフォルトでは、ファイルの最後に 1 つだけあります。

3. エクスポートを通じてエクスポートする場合は、{ } を追加します。エクスポートのデフォルトは必須ではなく、任意の名前を付けることができます。

詳細な紹介

エクスポートのデフォルトはわかっています。 VUE を学ぶ上で欠かせない {} ですが、その意味を理解しておく必要があります。 エクスポート デフォルト{}これはコンポーネントを再利用するときに使用されます。単一ページ コンポーネント ファイル A を作成し、それを別のファイル B で使用する必要があるとします。その場合、ES6 インポート/エクスポート構文を使用して、ファイル A で出力インターフェイスのエクスポートを定義し、ファイル B でインポートを導入する必要があります。インポートされたコンポーネントを使用します。これにより、コンポーネント A を再利用してファイル B と一致させ、HTML ページを生成できます。

import コマンドを使用する場合、ユーザーはロードする変数または関数の名前を知っている必要があります。そうでない場合は、ロードできません。ただし、ユーザーは間違いなくすぐに使い始めたいと考えており、モジュールにどのような属性やメソッドがあるかを理解するためにドキュメントを読む気はないかもしれません。ユーザーに利便性を提供し、ドキュメントを読まずにモジュールをロードできるようにするために、exportdefault コマンドを使用してモジュールのデフォルト出力を指定します。

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

他のモジュールが匿名モジュールをロードする場合、インポート コマンドは匿名関数に任意の名前を指定できます。

2. エクスポート デフォルト コマンドは、非匿名関数の前に使用されます

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

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド

]

以上がes6 でエクスポートのデフォルトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。