Vue コンポーネント通信: Provide/Inject を使用した依存関係の注入-PHPチュートリアル-php.cn

Vue コンポーネント通信: Provide/Inject を使用した依存関係の注入

PHPz

リリース： 2023-07-07 13:06:02

オリジナル

1133 人が閲覧しました

Vue コンポーネント通信: 依存関係注入に Provide/Inject を使用する

Vue 開発では、コンポーネント通信は重要かつ一般的な要件です。 Vue は、コンポーネントが通信するためのさまざまな方法を提供します。その 1 つは、provide/inject を使用してコンポーネントに依存関係を注入することです。

provide と inject は Vue の 2 つの関連オプションで、親コンポーネントにデータまたはメソッドを提供し、子コンポーネントにそれらを注入するために使用できます。他のコンポーネント通信方法と比較して、provide/inject にはいくつかの独自の機能と利点があります。

まず、依存関係の注入にprovide/injectを使用する場合、データまたはメソッドは親コンポーネントで提供され、子コンポーネントに注入されます。これは、複数のレベルにわたるコンポーネントの通信がよりシンプルかつ便利になることを意味します。 props を介してレイヤーごとにデータを渡す必要はありませんが、provide を通じてサブコンポーネントにデータを提供し、次に inject を通じてサブコンポーネント内のデータを取得します。

第 2 に、provide/inject は、コンポーネント通信のより柔軟な方法を提供できる比較的低レベルの API です。 Provide/Inject を通じて、オブジェクト、関数、インスタンスなど、あらゆる種類のデータやメソッドを親コンポーネントに提供できます。これにより、単なる props や Emit ではなく、コンポーネント間でデータとメソッドをより自由に共有できるようになります。

次に、provide/inject を使用した依存関係注入の例を見てみましょう。

親コンポーネント App.vue と子コンポーネント Child.vue があるとします。親コンポーネントのデータとメソッドを子コンポーネントで使用する必要があります。

<!-- App.vue -->
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  },
  provide() {
    return {
      message: this.message,
      showMessage: this.showMessage
    };
  }
}
</script>

ログイン後にコピー

<!-- Child.vue -->
<template>
  <div>
    <button @click="showMessage">Show Message</button>
  </div>
</template>
<script>
export default {
  inject: ['message', 'showMessage']
}
</script>

ログイン後にコピー

上の例では、provide メソッドを通じて message プロパティと showMessage プロパティをサブコンポーネントに提供します。サブコンポーネントでは、inject オプションを使用してこれら 2 つのプロパティを挿入し、サブコンポーネントで直接使用できるようにします。

子コンポーネント Child.vue では、@click イベントを通じて