Vue3 ミックスインの使い方

2.1. ミックスインオブジェクトを使用する場合、コンポーネントとミックスインに同じオプションが含まれている場合はどうすればよいですか?
2.2. 使用されているミックスインオブジェクトのオプションとインスタンス内のオプションの属性が同じ場合はどうすればよいでしょうか?
2.3. ミックスインオブジェクトはライフサイクルフック関数を追加することもできる

3. Mixinカスタム属性

4. 合併戦略

5. グローバル設定ミックスイン

Vue 2 は、データ、メソッド、ウォッチ、計算、ライフサイクルフック関数などのオプションの API を使用します。

mixin 、 vueコンポーネントで再利用可能な関数を配布するための非常に柔軟な方法を提供します。mixin mixinは、任意のコンポーネントオプションを含めることができます。コンポーネントがmixinオブジェクトを使用すると、 mixinオブジェクトのすべてのオプションがコンポーネント独自のオプションにミックスされます。

1. mixin の使い方は？

簡単に言えば、 mixinオブジェクトは、 data内のデータ、メソッド、計算プロパティ、ライフサイクルフック関数など、コンポーネントの一般的なオプションを抽出し、それらをコンポーネントに導入して、コンポーネント自体のオプションとマージできるようにします。

例1:

<スクリプト>

定数myMixin = {

 データ（）{

  戻る {

   番号:520

  }

 },

 マウントされた(){

  console.log('mixin がマウントされました');

 }

}

エクスポートデフォルト{

  ミックスイン:[myMixin],

}

</スクリプト>

は以下と同等です:

<スクリプト>

エクスポートデフォルト{

 データ（）{

  戻る {

   番号:520

  }

 },

 マウントされた(){

  console.log('mixin がマウントされました');

 }

}

</スクリプト>

これを行う利点は、複数のコンポーネントの共通オプションをミックスインオブジェクトに抽出し、必要に応じて直接導入できることです。

2. ミックスイン使用時の注意

mixinに含まれるオプションは、コンポーネントにも含めることができます。 mixinに含まれるオプションのプロパティの一部が同じ場合はどうなるでしょうか? mixinとコンポーネントの両方に同じ名前のメソッドが存在する場合はどうすればよいでしょうか?または、両方にライフサイクルフック関数が含まれている場合、どちらが最初に実行され、どちらが後で実行されますか?次に、mixin を使用する際に注意すべき点について見ていきましょう。

2.1. ミックスインオブジェクトを使用する場合、コンポーネントとミックスインに同じオプションが含まれている場合はどうすればよいですか?

例2 : mixinオブジェクトとインスタンスの両方にdataオプションが含まれており、その中に2つの異なる変数が含まれています。

<テンプレート>

 <div>

  {{qdr}} - {{name}} 

 </div>

</テンプレート>

<スクリプト>

定数myMixin = {

 データ（）{

  戻る {

   名前:「フロントエンド大好き妹」

  }

 }

}

エクスポートデフォルト{

 ミックスイン:[myMixin],

 データ（）{

  戻る {

   qdr: 「フロントエンド担当者」

  }

 }

}

</スクリプト>

実行すると、両方の変数が使用可能であり、 mixinオブジェクト内のdataインスタンスのdataオプションとマージされていることがわかります。 methodsおよびcomputedについても同様です。

前の例の 2 つの変数を同じ名前に変更するとどうなりますか?

2.2. 使用されているミックスインオブジェクトのオプションとインスタンス内のオプションの属性が同じ場合はどうすればよいでしょうか?

例3 : data内に同じ変数名nameが存在する

<テンプレート>

 <div>

  {{名前}} 

 </div>

</テンプレート>

<スクリプト>

定数myMixin = {

 データ（）{

  戻る {

   名前:「フロントエンド大好き妹」

  }

 }

}

エクスポートデフォルト{

 ミックスイン:[myMixin],

 データ（）{

  戻る {

   名前: 「フロントエンド担当者」

  }

 }

}

</スクリプト>

実行結果: 名前の値は「Front-end Person」です。

属性値が同じ場合、近接原則が選択され、インスタンス内の値が最初に継承されるため、 mixinオブジェクトの属性はインスタンス内の属性によって上書きされます。

2.3. ミックスインオブジェクトはライフサイクルフック関数を追加することもできる

最初に実行されるのは、ミックスインとインスタンスのどちらでしょうか?

例4 : マウントを例に、ライフサイクルフック関数をミックスmounted mixin追加する

定数myMixin = {

 マウントされた(){

  console.log('mixin がマウントされました');

 }

}

エクスポートデフォルト{

 ミックスイン:[myMixin],

 マウントされた(){

  console.log('マウントされました');

 }

}

実行結果:

ライフサイクル関数は一緒に実行され、最初にmixin内の関数が実行され、次にインスタンス内の関数が実行されることが分かりました。

3. Mixinカスタム属性

$options現在のコンポーネントインスタンスのオプションを初期化するために使用されます。オプションにカスタムpropertyを含める必要がある場合に便利です。

つまり、 $optionsインスタンス内のmixinカスタムプロパティを呼び出すために使用されます。

例5 : カスタム属性の追加

定数myMixin = {

  カスタム:'カスタム属性'

 }

例での使用:



マウントされた(){

 コンソールにログ出力します。

}

インスタンスに同じ名前のカスタムプロパティも含まれている場合、優先順位はどのように処理されますか?優先順位を制御したい場合はどうすればよいでしょうか?

4. 合併戦略

optionMergeStrategiesオプションのマージ戦略では、 optionMergeStrategiesを使用して、 mixinカスタム属性がインスタンス内の属性と競合する場合のマージルール (つまり、どちらを最初に使用するか) を定義します。

利用規則:

app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{

  return appVal || mixinVal // どの属性値が最初に返されるかを決定します}

上記の例 5 に従って、インスタンスにcustom属性を追加し、実行して結果を表示します。

例6 : mixinとインスタンス属性の優先順位の検証

<スクリプト>

定数myMixin = {

  カスタム:'mixin カスタム',

}

エクスポートデフォルト{

  カスタム:'アプリカスタム',

  ミックスイン:[myMixin],

  マウントされた(){

    console.log(this.$options.custom); // 結果を印刷: app custom

  }

}

</スクリプト>

mixinオブジェクト内の属性値がインスタンス内の属性値によって上書きされていることがわかります。上記のoptionMergeStrategies属性を使用して、 customのマージルールを変更できます。

main.js ファイルにインポートします:

app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{

 mixinVal を返す || appVal

}

再度実行すると、印刷された結果がミックスインの属性値になることがわかります。

console.log(this.$options.custom); // 結果を出力: mixin custom

5. グローバル設定ミックスイン

プロジェクト内に特定のオプションを再利用するコンポーネントが複数ある場合は、 mixinオブジェクトをグローバルに使用できます。インスタンスは複数のmixinオブジェクトを導入することもできます。

構文は次のとおりです。

app.mixin([ {}, {}, {} ])

vue3 mixin の使い方に関するこの記事はこれで終わりです。vue3 mixin に関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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