Vue ミックスインの使用方法とオプションのマージの詳細な説明

1. コンポーネントでの使用

Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。ミックスインオブジェクトには任意のコンポーネントオプションを含めることができます。コンポーネントがミックスインを使用する場合、ミックスインのすべてのオプションがコンポーネント自体のオプションに「混合」されます。

<テンプレート>
  <div class="event_style">
    <h2>基本</h2>
    <div class="inner_children">
      <span>{{ メッセージ }}</span>
    </div>
  </div>
</テンプレート>
<スクリプト>
var myMixin = {
  データ（） {
    戻る {
      メッセージ： ""、
    };
  },
  作成: 関数 () {
    console.log("作成:ミックスインを追加");
    this.message = "作成済み: ミックスインを追加";
    hello() を返します。
  },
  メソッド: {
    こんにちは: 関数() {
      console.log("mixin からこんにちは!");
    },
  },
};
// ミックスインオブジェクトを使用するコンポーネントを定義する export default {
  名前: "mixin-basic",
  ミックスイン: [myMixin],
};
</スクリプト>

2. オプションのマージ

コンポーネントとミックスインに同じ名前のオプションがある場合、それらのオプションは適切な方法で「マージ」されます。

たとえば、データオブジェクトは内部的に再帰的にマージされ、競合が発生した場合はコンポーネントデータが優先されます。

<テンプレート>
  <div class="event_style">
    <h2>オプションのマージ</h2>
    <div class="inner_children">
      <span>{{ メッセージ }}</span>
      <span>{{ メッセージ1 }}</span>
    </div>
  </div>
</テンプレート>
<スクリプト>
var myMixin = {
  データ（） {
    戻る {
      メッセージ: "mixin:mixin",
      メッセージ1: "mixin:mixin-1",
    };
  },
  作成: 関数 () {
    hello() を返します。
  },
  メソッド: {
    こんにちは: 関数() {
      console.log("mixin:mixin からこんにちは!");
    },
  },
};
// ミックスインオブジェクトを使用するコンポーネントを定義する export default {
  名前: "mixin-merge",
  ミックスイン: [myMixin],
  データ（） {
    戻る {
      メッセージ: "コンポーネント: hello",
    };
  },
  作成: 関数 () {
    hello() を返します。
  },
  メソッド: {
    こんにちは: 関数() {
      console.log("コンポーネント: hello world!");
    },
  },
};
</スクリプト>
<スタイルスコープ>
.イベントスタイル{
  左パディング: 50px;
  右パディング: 50px;
}
.inner_children{
  ディスプレイ: フレックス;
  flex-direction: 列;
  高さ: 150px;
  境界線: 1px 実線 #333;
  パディング: 6px;
}
.inner_children スパン {
  フォントサイズ: 20px;
}
</スタイル>

ページレンダリング効果