Vue混合記述法

Vue ミキシングは、Vue が提供するコードを再利用する方法です。これにより、オプションのセットを定義し、それらのオプションを複数のコンポーネント間で共有できます。 Vue ミックスインの一般的な使用法の 1 つは、コンポーネントが必要とする計算されたプロパティ、メソッド、およびリアクティブ データを追加することです。この記事では、Vue ミックスインの基本概念と一般的な使用法を紹介し、実践的な例とコードを示します。

1. 基本概念

Vue mixin は実際には JavaScript オブジェクトであり、任意の Vue コンポーネント オプションを含めることができます。通常、ミックスインは、一般的に使用される計算プロパティ、メソッド、データを定義し、複数のコンポーネントでこれらのオプションを共有できます。

ミックスイン オブジェクトをコンポーネントに適用すると、ミックスイン オブジェクトのオプションはコンポーネントのオプションにマージされます。ミックスインとコンポーネントの両方が同じオプションを定義している場合、コンポーネントのオプションがミックスインのオプションをオーバーライドします。

2. 基本的な使用法

以下は、計算されたプロパティとメソッドを定義する簡単なミックスインの例です:

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

このミックスイン オブジェクトでは、定義 firstName と lastName を連結する計算されたプロパティ fullName。また、sayHello メソッドも定義されており、呼び出されると、fullName を使用してグリーティング ボックスがポップアップ表示されます。

これで、このミックスイン オブジェクトを Vue コンポーネントに適用できます。次の例を参照してください。

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

このコンポーネント定義では、myMixin をコンポーネントに混合し、2 つのデータ オプション (firstName と lastName) を含むいくつかのコンポーネント オプションを定義します。 myMixin で fullName 計算プロパティと SayHello メソッドを混合したため、これら 2 つのオプションもコンポーネントで使用できるようになります。

これで、このコンポーネントで次のオプションを使用できるようになります。

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

このコンポーネントは、firstName と lastName に基づいて fullName を計算し、ページに表示します。 「Say Hello」ボタンをクリックすると、sayHello メソッドが呼び出され、fullName を含むグリーティング ボックスがポップアップ表示されます。

3. ローカル ミキシング

ミキシングはグローバル コンポーネントに適用できるだけでなく、コンポーネント内でローカルにミキシングすることもできます。グローバル ミックスインとローカル ミックスインの例を次に示します。

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

この例では、まずグローバル ミックスイン myGlobalMixin を定義し、次にそれをコンポーネント定義でミックスします。同時に、ローカル ミックスイン myLocalMixin も定義し、グローバル ミックスインと一緒にコンポーネントにミックスします。ローカル ミックスインはグローバル ミックスインよりも優先度が高いため、ローカル ミックスインとグローバル ミックスインの両方にオプションが表示される場合は、ローカル ミックスインのオプションが使用されます。

4. ミキシング実行シーケンス

ミキシングとコンポーネントに同じオプションが存在する場合、混合された値がコンポーネント内の元の値を上書きします。ただし、さまざまなミックスインとコンポーネントが定義される順序は、最終的なマージ オプションに影響します。通常、ミックスイン内のオプションは最初にマージされ、次にコンポーネント オプションとマージされますが、ミックスインとコンポーネントが同じオプションを定義している場合は、コンポーネント オプションが最初に使用されます。例は次のとおりです。

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

この例では、myMixin ミックスインを定義し、そこでメッセージ属性を含むデータ オプションを定義します。次に、myMixin を my-component コンポーネントに混合し、コンポーネント内で同一のデータ オプションを定義します。このコンポーネントが作成されると、「コンポーネント メッセージ」が出力されます。コンポーネントで定義されたメッセージ属性は、ミックス内の属性よりも高い優先順位を持っているためです。

ミックスイン オプションをミックスイン オブジェクトおよびコンポーネント オプションに保持したい場合は、Vue.extend() 関数を使用してミックスイン オブジェクトを作成します。これは、すべてのコンポーネント インスタンスにわたってオプションが保持される新しい拡張 Vue コンストラクターを表します。例は次のとおりです。

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

この例では、Vue.extend() 関数を使用して、メッセージ属性が定義されているデータ オプションを含む混合オブジェクト myMixin を作成します。次に、myMixin を my-component コンポーネントに混合し、このコンポーネントで同じデータ オプションを定義します。このコンポーネントが作成されると、「Mixin Message」が出力されます。拡張 Vue コンストラクターで定義されたプロパティは、コンポーネントで定義されたプロパティよりも優先されるためです。

5. 概要

Vue ハイブリッドはコードを再利用する便利な方法であり、複数のコンポーネントの共有オプションを提供してコードの再利用性を向上させます。ミックスインはグローバルにもローカルにも使用できます。Vue でミックスインを使用することは、関数を迅速に実装し、コードの再利用性を向上させるための最良のオプションの 1 つです。ただし、コードが期待どおりに動作するようにするには、ミックスイン オプションの優先順位とマージ順序に注意する必要があります。実際の開発では、必要に応じてミックスイン オブジェクトを定義し、そのミックスイン オブジェクトを共有する必要があるコンポーネントにミックスイン オブジェクトを混ぜることで、コードの再利用を実現できます。

以上がVue混合記述法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。