ES 6におけるexport defaultコマンドの詳細
6649 ワード
VUEを勉強している間に
export default{}
不可欠ですが、その意味は理解しなければなりません.
export default{}これは、コンポーネントを多重化する際に使用されます.単一ページコンポーネントAファイルを作成し、別のファイルBで使用する必要がある場合は、ES 6のimport/export構文を使用して、ファイルAに出力インタフェースexportを定義し、ファイルBにimportを導入し、導入したコンポーネントを使用することで、コンポーネントAを多重化してファイルBに合わせてhtmlページを生成することができます.
印象を深めるために以下のようにまとめました
importコマンドを使用する場合、ユーザーはロードする変数名または関数名を知る必要があります.そうしないとロードできません.しかし、ユーザーは、モジュールにどのような属性と方法があるかを理解するために、ドキュメントを読む必要はありません.ドキュメントを読まずにモジュールをロードできるようにするには、export defaultコマンドを使用して、モジュールのデフォルト出力を指定します.1、基本的な使い方
1
2
3
4
1
2
3
4
5
他のモジュールがモジュールをロードすると、importコマンドは匿名関数に任意の名前を指定できます.
2、export defaultコマンド非匿名関数の前に使用
1
2
3
4
5
6
7
8
9
10
11
12
13
3、exportプラスdefaultとプラスの違い
1
2
3
4
5
6
7
8
9
10
11
12
第1のグループがexport defaultを使用する場合、対応するimport文はカッコを使用する必要はありません.2番目のグループがexport defaultを使用しない場合、対応するimport文はカッコを使用する必要があります.export defaultコマンドは、モジュールのデフォルト出力を指定します.モジュールにはデフォルトの出力が1つしかないため、export defaultコマンドは1回しか使用できません.したがって、importコマンドの後にカッコを大きくする必要はありません.export defaultコマンドに唯一対応する可能性があるからです.
4、export defaultはdefaultという変数やメソッドを出力し、システムは任意の名前を付けることができます.
1
2
3
4
5
6
7
8
9
10
5、export defaultコマンドの本質は後の値をdefault変数に割り当てることであるため、直接1つの値をexport defaultの後に書くことができる
1
2
3
4
5
6、export defaultコマンドは、モジュールを入力するときに非常に直感的で、lodashモジュールを入力する例
1
1つのimport文にデフォルトメソッドと他のインタフェースを同時に入力したい場合は、次のように書くことができます.
1
上記のコードに対応するexport文は以下の通りです.
1
2
3
4
5
6
7
8
9
7、export defaultはクラスを出力することもできる
1
2
3
4
5
6
exportコマンドとimportコマンドの詳細はリファレンスアドレスを参照http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4
export default{}
不可欠ですが、その意味は理解しなければなりません.
export default{}これは、コンポーネントを多重化する際に使用されます.単一ページコンポーネントAファイルを作成し、別のファイルBで使用する必要がある場合は、ES 6のimport/export構文を使用して、ファイルAに出力インタフェースexportを定義し、ファイルBにimportを導入し、導入したコンポーネントを使用することで、コンポーネントAを多重化してファイルBに合わせてhtmlページを生成することができます.
印象を深めるために以下のようにまとめました
importコマンドを使用する場合、ユーザーはロードする変数名または関数名を知る必要があります.そうしないとロードできません.しかし、ユーザーは、モジュールにどのような属性と方法があるかを理解するために、ドキュメントを読む必要はありません.ドキュメントを読まずにモジュールをロードできるようにするには、export defaultコマンドを使用して、モジュールのデフォルト出力を指定します.1、基本的な使い方
//export-default.js export-default.js，
export default function () {
console.log('foo');
}1
2
3
4
//import-default.js
import customName from './export-default';
customName(); //'foo'
// import ， export-default.js ， 。
， import ， 。1
2
3
4
5
他のモジュールがモジュールをロードすると、importコマンドは匿名関数に任意の名前を指定できます.
2、export defaultコマンド非匿名関数の前に使用
// export-default.js
export default function foo() {
console.log('foo');
}
//
function foo() {
console.log('foo');
}
export default foo;
// ，foo foo， 。 ， 。1
2
3
4
5
6
7
8
9
10
11
12
13
3、exportプラスdefaultとプラスの違い
//
export default function crc32() { //
// ...
}
import crc32 from 'crc32'; //
//
export function crc32() { //
// ...
};
import {crc32} from 'crc32'; // 1
2
3
4
5
6
7
8
9
10
11
12
第1のグループがexport defaultを使用する場合、対応するimport文はカッコを使用する必要はありません.2番目のグループがexport defaultを使用しない場合、対応するimport文はカッコを使用する必要があります.export defaultコマンドは、モジュールのデフォルト出力を指定します.モジュールにはデフォルトの出力が1つしかないため、export defaultコマンドは1回しか使用できません.したがって、importコマンドの後にカッコを大きくする必要はありません.export defaultコマンドに唯一対応する可能性があるからです.
4、export defaultはdefaultという変数やメソッドを出力し、システムは任意の名前を付けることができます.
//
export var a = 1;
//
var a = 1;
export default a;
//
export default var a = 1;
// ，export default a a default。 ， 。1
2
3
4
5
6
7
8
9
10
5、export defaultコマンドの本質は後の値をdefault変数に割り当てることであるため、直接1つの値をexport defaultの後に書くことができる
//
export default 42;
// ， default。
export 42;1
2
3
4
5
6、export defaultコマンドは、モジュールを入力するときに非常に直感的で、lodashモジュールを入力する例
import _ from 'lodash';1
1つのimport文にデフォルトメソッドと他のインタフェースを同時に入力したい場合は、次のように書くことができます.
import _, { each, each as forEach } from 'lodash';1
上記のコードに対応するexport文は以下の通りです.
export default function (obj) {
// ···
}
export function each(obj, iterator, context) {
// ···
}
export { each as forEach };// forEach ， each ， forEach each 。1
2
3
4
5
6
7
8
9
7、export defaultはクラスを出力することもできる
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();1
2
3
4
5
6
exportコマンドとimportコマンドの詳細はリファレンスアドレスを参照http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4