Vueでコンテキストから値を渡す方法

Context API を使用すると、データを提供するプロバイダー コンポーネントを定義し、そのデータに inject() 関数を使用して子孫コンポーネントでアクセスすることで、コンポーネント間でデータを渡すことができます。具体的な手順には次のものが含まれます。 プロバイダー コンポーネントで Provide() 関数を使用してプロバイダー コンポーネントを定義します。 inject() 関数を使用して、共有データにアクセスする必要があるコンポーネントに値を注入します。注入された値にアクセスします。

Vue で Context を使用して値を渡す

Context は、コンポーネント ツリー内のコンポーネント間でデータを渡すことを可能にする Vue.js エコシステムの API です。これは、プロバイダー コンポーネントで値を定義し、子孫コンポーネントの挿入 API を介してその値にアクセスすることによって行われます。

コンテキストを使用して値を渡す方法

プロバイダーコンポーネントの作成

プロバイダーコンポーネントを定義するには、provide()関数を使用します。このコンポーネントは、共有する必要があるデータを提供します。

import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}

値の挿入

共有データにアクセスする必要があるコンポーネントでは、inject() 関数を使用して値を挿入します。

import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
}

挿入された値へのアクセス

挿入された値にコンポーネントのテンプレートまたはスクリプトでアクセスできるようになりました。

<template>
  <h1>{{ myValue }}</h1>
</template>

例

親コンポーネントと子コンポーネントを持つコンポーネント ツリーを考えてみましょう。親コンポーネントは、子コンポーネントがアクセスする必要がある値「myValue」を提供します。

親コンポーネント (Provider.vue)

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}
</script>

子コンポーネント (Consumer.vue)

<script>
import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
</script>

Result

Consumer.vue がレンダリングされると、親コンポーネントによって提供される 'myValue' 値にアクセスしますそしてそれをUIに表示します。

以上がVueでコンテキストから値を渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。