Vueのミックスインと継承について詳しく説明します

序文

Vue での Mixin は比較的単純な知識ポイントです。 less や sass などの CSS 前処理言語に精通している開発者は、mixin にも精通している必要があります。 Vue のミックスインは、less などのミックスインとほぼ同じです。これらはすべて、定義された関数をそのまま Vue コンポーネントに挿入します。これは、オブジェクト指向プログラミングの継承に似ています (似ていると言っただけです :))。

ミックスインは、Vue インスタンスまたはコンポーネント インスタンスのライフサイクル フックとプロパティをプロパティとして持つことができるオブジェクトです。グローバルにまたはコンポーネントにミックスインすると、Vue インスタンスまたはコンポーネント インスタンスには、ミックスインで定義されたライフサイクル フックとプロパティが設定されます。 2 つの間に重複がある場合は、特定のルールに従って結合されます。

ミキシン

• 複数の vue ファイルで再利用される関数コードを 1 つの js ファイルに抽出し、必要な場所で呼び出します。
• js ファイル内にオブジェクトを定義します。オブジェクト内には、vue ファイルの <script> で定義できるデータ、メソッド、コンポーネントなどのコードを記述できます。

Mixin ノート (重複名)

• コンポーネント内のデータ変数名とミックスイン内のデータ変数名が重複している場合は、コンポーネントが優先されます。
• コンポーネント内のメソッド、計算済みメソッド、および wath の名前が重複している場合と、ミックスイン内のメソッド、計算済みメソッド、および wath の名前が重複している場合、コンポーネントが優先されます。
• コンポーネント内のライフフック関数とミックスイン内のライフフック関数の名前が同じ場合、両方が実行されますが、コンポーネント内のフック関数が最初に実行されます。

ローカルミックスイン

グローバル ミックスイン

定義とグローバル登録

電話

継承する

• 注意: 多重継承の問題が頻繁に発生するため、多重継承はここでは適していません。
• .vue ファイルを継承するだけでなく、extends では mixin のように js ファイル内のオブジェクトも使用できます。
• extends inheritance.vueファイル内のテンプレートのHTMLは継承できません

ミックスインと継承の違い

• まずは公式ドキュメントの定義を見てみましょう。実は、どちらも継承として理解することができます。
• ミックスインはオブジェクトの配列を受け取ります（これは多重継承として理解できます）。
• extends が受け取るのはオブジェクトまたは関数です (単一継承として理解できます)。
• 注: コンポーネントが継承とミックスインの両方を使用する場合、両者の間に重複する名前があると、ミックスインが継承をオーバーライドします。

要約する

Vue のミックスインと継承に関するこの記事はこれで終わりです。Vue のミックスインと継承に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。