Vue のミックスインの使用方法の詳細な説明

序文

プロジェクトが大きくなるにつれて、コンポーネント間に類似した機能が多くあることに気付くでしょう。同じコードスニペット (データ、メソッド、ウォッチ、マウントなど) を何度もコピーして貼り付けます。各コンポーネントでこれらのプロパティとメソッドの定義を繰り返すと、プロジェクトでコードが冗長になり、メンテナンスの難易度が増します。このような状況に備えて、公式の Mixins 機能が提供されています。

1. Mixin とは何ですか?

ミックスインは、公式の説明によると、Vue コンポーネントで再利用可能な機能を配布する非常に柔軟な方法です。ミックスインは、データ、コンポーネント、メソッド、作成、計算など、コンポーネントのスクリプト項目に任意の機能オプションを含めることができる js オブジェクトです。共通関数をオブジェクトとして mixins オプションに渡すだけです。コンポーネントが mixins オブジェクトを使用すると、mixins オブジェクトのすべてのオプションがコンポーネント自体のオプションにミックスされます。これにより、コードの再利用性が向上し、コードがクリーンで保守しやすくなります。

2. Mixin はいつ使用すればよいですか?

複数のコンポーネントに類似したデータや関数がある場合、ミックスインを使用して共通部分を抽出できます。ミックスインによってカプセル化された関数を通じて、それらを呼び出すコンポーネントは関数の外部スコープを変更しません。

3. Mixin を作成するには?

src ディレクトリに mixins フォルダーを作成し、そのフォルダー内に myMixins.js ファイルを作成します。前に述べたように、mixinsはjsオブジェクトなので、myMixinsはオブジェクトの形式で定義する必要があります。オブジェクトでは、データ、コンポーネント、メソッド、作成済み、計算済み、その他のプロパティをvueコンポーネントと同じように定義し、エクスポートを通じてオブジェクトをエクスポートできます。

4. Mixin の使い方は?

呼び出す必要があるコンポーネントに myMixins.js ファイルをインポートし、必要なオブジェクトをエクスポートデフォルトにインポートします。

5. ミックスインの特徴

[5.1] メソッドとパラメータはコンポーネント間で共有されません。コンポーネントはミックスインを呼び出し、そのプロパティを自身のコンポーネントにマージしますが、そのプロパティは現在のコンポーネントによってのみ認識され、共有されません。つまり、他のコンポーネントは現在のコンポーネントからミックスインのデータとメソッドを取得できません。

①まず、混合オブジェクトmyMixins.jsにageフィールドとgetAgeメソッドを定義します。

エクスポートconst myMixins = {
コンポーネント:{},
データ（） {
戻る {
年齢: 18歳
}
},
マウント() {
年齢を取得する()
},
メソッド: {
年齢を取得する() {
コンソールログ(this.age)
}
}
}

② コンポーネント1でnumに+1演算を実行する

"@/mixins/myMixins.js" から { myMixins } をインポートします。
エクスポートデフォルト{
ミックスイン: [myMixins],
データ（） {
戻る {}
},
作成された() {
this.age++
},
}

③コンポーネント2が動作しない

エクスポートデフォルト{
ミックスイン: [myMixins],
データ（） {
戻る {}
},
}

④コンソール出力を表示するために、それぞれ2つのページに切り替えます。コンポーネント 1 によって age の値が変更され、コンポーネント 2 の age 値は混合オブジェクトの初期値のままであり、コンポーネント 1 の追加によって変更されていないことがわかります。

[5.2] ミックスインを導入すると、コンポーネントはそれらをマージし、ミックスイン内のデータとメソッドを現在のコンポーネントに拡張します。マージプロセス中に競合が発生する可能性があります。次に、ミックスインのマージ競合について詳しく説明します。

6. ミックスインのマージ競合

[6.1] 値がオブジェクト（コンポーネント、メソッド、計算、データ）であるオプションは、コンポーネントに混合されるとマージされます。キーが競合する場合は、コンポーネントが優先され、コンポーネント内のキーが混合オブジェクトのキーを上書きします。

①混合オブジェクトにage属性、getAge1メソッド、getAge2メソッドを追加します。

// マイミックスイン.js
エクスポートconst myMixins = {
コンポーネント:{},
データ（） {
戻る {
年齢: 18歳
}
},
メソッド: {
getAge1() {
console.log("mixins からの age1 =", this.age )
},
getAge2() {
console.log("mixins からの age2 =", this.age )
},
}
}

②myMixinsファイルを導入したコンポーネントに、age属性、getAge1メソッド、getAge3メソッドを追加しました

// テンプレート.vue
"@/mixins/myMixins.js" から { myMixins } をインポートします。
エクスポートデフォルト{
ミックスイン: [myMixins],
データ（） {
戻る {
年齢: 20,
}
},
マウント() {
年齢1を取得します。
年齢2を取得します。
年齢3を取得します。
},
メソッド: {
getAge1() {
console.log('テンプレートからのage1 =', this.age)
},
getAge3() {
console.log('テンプレートからのage3 =', this.age)
},
}
}

③ コンポーネントのageが混合オブジェクトのageをオーバーライドし、コンポーネントのgetAge1メソッドが混合オブジェクトのgetAge1メソッドをオーバーライドしていることがわかります。

[6.2] 値が関数（作成、マウント）であるオプションは、コンポーネントに混合されたときにマージされて呼び出されます。混合オブジェクト内のフック関数は、コンポーネント内のフック関数の前に呼び出されます。

7. vuexとの違い

vuex: 状態管理に使用されます。ここで定義された変数は、各コンポーネントで使用および変更できます。いずれかのコンポーネントでこの変数の値が変更されると、他のコンポーネントのこの変数の値もそれに応じて変更されます。

ミックスイン: 共有変数を定義して、各コンポーネントで使用できます。コンポーネントに導入された後、各変数は互いに独立しており、値の変更はコンポーネント内で互いに影響しません。

8. パブリックコンポーネントとの違い

コンポーネント: 親コンポーネントにコンポーネントを導入することは、子コンポーネントが使用するための独立したスペースを親コンポーネント内に与え、props に従って値を渡すことと同じですが、本質的には 2 つは比較的独立しています。

ミックスイン: コンポーネントが導入された後、コンポーネント内のオブジェクトとメソッドとマージされます。これは、親コンポーネントのオブジェクトとメソッドを拡張することと同じです。新しいコンポーネントを形成すると理解できます。

Vue のミックスインの使い方を詳しく説明したこの記事はこれで終わりです。Vue のミックスインに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: