ミックスイン
基本
ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。
例:
// ミックスインオブジェクトを定義 |
オプションのマージ
ミックスインとコンポーネントそれ自身がオプションと重複するとき、それらは適切なストラテジを使用して”マージ”されます。例えば、同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。加えて、ミックスインのフックはコンポーネント自身のフック前に呼ばれます:
var mixin = { |
オブジェクトの値を期待するオプションは、例えば、methods
、components
、そして directives
らは同じオブジェクトにマージされます。コンポーネントオプションはこれらのオブジェクトでキーのコンフリクトがあるとき、優先されます:
var mixin = { |
同じマージストラテジが Vue.extend()
で使用されることに注意してください。
グローバルミックスイン
グローバルにミックスインを適用することもできます。使用に注意してください!一度、グローバルにミックスインを適用すると、それはその後に作成する全ての Vue インスタンスに影響します。適切に使用されるとき、これはカスタムオプションに対して処理ロジックを注入するために使用することができます:
// `myOption` カスタムオプションにハンドラを注入する |
サードパーティのコンポーネントを含んでいる、すべての単一の作成された Vue インスタンスに影響があるため、グローバルミックスインは多用せずかつ慎重に使用してください。多くのケースでは、上記の例のような、カスタムオプションを処理するようなものに使用すべきです。
カスタムオプションのマージストラテジ
カスタムオプションでがマージされるとき、それらは単純に既存の値を上書きするデフォルトのストラテジを使用します。カスタムロジックを使用してカスタムオプションをマージする場合、Vue.config.optionMergeStrategies
をアタッチする必要があります:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { |
ほとんどのオブジェクトベースのオプションでは、単純に methods
で使用されるのと同じストラテジを使用することができます:
var strategies = Vue.config.optionMergeStrategies |