Vue混合記述法-フロントエンドQ&A-php.cn

Vue混合記述法

WBOY

リリース： 2023-05-20 12:00:08

オリジナル

698 人が閲覧しました

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 サイトの他の関連記事を参照してください。