【Vue】VueのMixin（ミキシング）の詳しい紹介

Mixin は、複数のコンポーネント間でコードを共有できる Vue の再利用可能なコードフラグメントの一般的な抽象化です。Mixin は実際にはオブジェクトの形式で存在し、このオブジェクトにはデータ、メソッド、計算などのさまざまなオプションを含めることができ、ライフサイクル関数フックもサポートされています。

Mixin を使用すると、コードの重複を回避し、コードの再利用性と保守性を向上させることができます。Vue での Mixin の使用は非常に簡単で、Mixin オブジェクトを作成し、その Mixin を使用する必要があるコンポーネントの mixins オプションを介して Mixin オブジェクトを挿入するだけです。簡単なミックスインの例を次に示します。

// 创建一个Mixin对象
var myMixin = {
  data: function() {
    return {
      message: 'Hello, world!'
    };
  },
  methods: {
    sayHello: function() {
      console.log(this.message);
    }
  }
};

// 注入Mixin对象
var app = new Vue({
  el: '#app',
  mixins: [myMixin],
  mounted: function() {
    // 在组件中调用Mixin的方法和属性
    this.sayHello();
  }
});

myMixin上記のコードでは、データ属性とメソッド属性を含む Mixin オブジェクトという名前の Mixin オブジェクトを作成します。次に、アプリコンポーネントの mixins オプションを介して Mixin オブジェクトを挿入します。これにより、アプリコンポーネントにも Mixin オブジェクトの data 属性と Methods 属性が与えられます。マウントされたフックでは、Mixin オブジェクトの SayHello メソッドを呼び出して、メッセージ属性を出力します。

Mixin オブジェクトがコンポーネントによって定義されたオプションと競合する場合、コンポーネントによって定義されたオプションが Mixin オブジェクトのオプションをオーバーライドすることに注意してください。さらに、複数の Mixin オブジェクトに同じ名前のオプションが含まれている場合、最後の Mixin オブジェクトのオプションが前のオプションを上書きします。したがって、ミックスインを使用するときは、名前の競合とオプションの順序に注意してください。

【Vue】VueのMixin（ミキシング）の詳しい紹介

おすすめ