ミックスインとは？
機能を再利用するための仕組みでオブジェクトとして定義して複数のコンポーネント間で共有して使えるようにするための仕組みです。
継承との違い
継承は、基底クラスを受け継ぎながら新しい機能を追加するのに対してミックスインは特に親クラスなどなしに横断的に機能を共通化することです。
ミックスインを使うポイント
複数のコンポーネントで同じコードを繰り返し記述していることに気付いたらそのコードをミックスインとして抜き出します。
構文
mixinsオプションをコンポーネントに追加します。mixinsに指定できるのは配列になっていて複数のミックスインを挿入することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//ミックスインとして定義する関数 const ミックスイン関数名 = { 処理内容 } //ミックスインを挿入する内容 const コンポーネント1 = { mixins: [ミックスイン関数名1,ミックスイン関数名2], template: 'テンプレート内容' } //ミックスインを挿入する内容 const コンポーネント2 = { mixins: [ミックスイン関数名], template: 'テンプレート内容' } |
ミックスインの注意点
ミックスインとコンポーネントでプロパティが重複していた場合
ミックスインとコンポーネントで同じプロパティ名が使われていた場合はコンポーネントの方のプロパティが優先されて採用されます。
ライフサイクルフックの場合は例外
ただし、例外があってライフサイクルフック(created、mounted)が重複していた場合は両方実行されます。実行順序としてはミックスインが実行された後にコンポーネントの方が実行されることになります。なお、グローバルミックスインが別に作られていた場合はグローバルミックスインのライフサイクルフックが最優先で実行されます。
機能の詰め込みには注意
１つのミックスインに機能を詰め込みすぎると不要な機能をコンポーネントに実装することになってしまいます。可能な限りミックスインを実装する際は単一の小さい機能にするようにしましょう。
グローバルミックスイン
全体（全てのVueインスタンス）に適用できるミックスインがあります。非常に影響範囲が広いのでもし採用するとしたらかなり慎重にならないといけません。
用途
- 権限が必要なページの制御をしたい場合
構文
|
1 2 3 |
Vue.mixin({ 処理内容 }) |
ミックスインの命名規則
「~できる」とするのが基本です。
- 動詞 + able
この記事へのコメントはありません。