Vue3 provide 関数

Vue3 选项式 APIVue3 オプション API

provide関数は Vue3 が提供する高階関数であり、コンポーネントツリー内の親コンポーネントから子コンポーネントへデータを渡すために使用されます。従来のpropsと比較して、provideとinjectデータを共有するためのより柔軟な方法を提供し、特にコンポーネントの階層が深い場合に役立ちます。

使用provide関数を使用する場合、親コンポーネントはそれを介して子コンポーネントにデータやメソッドを公開でき、子コンポーネントはinject関数を介してこれらのデータやメソッドを受け取ることができます。

provide 関数の基本的な使い方

以下は簡単な例で、provide関数を使って親コンポーネントでデータを提供し、子コンポーネントでinject関数でデータを受け取る方法を示しています。

親コンポーネント

例

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from Parent!';
    provide('message', message);
  }
};
</script>

子コンポーネント

例

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

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

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

この例では、親コンポーネントはprovide関数を介して文字列を渡し、message子コンポーネントはinject関数を介してこのメッセージを受け取り、表示しました。

provide 関数の高度な使い方

provide関数は単純なデータだけでなく、メソッド、オブジェクト、さらにはリアクティブデータも渡すことができます。これにより、複雑なアプリケーションのシナリオで非常に役立ちます。

リアクティブデータの受け渡し

Vue3 では、ref 或 reactiveを使用してリアクティブデータを作成し、それをprovide関数を介して子コンポーネントに渡すことができます。

例

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      count: 0
    });

    provide('state', state);

    return {
      state
    };
  }
};
</script>

子コンポーネントでは、inject関数を使用してこのリアクティブオブジェクトを取得し、それを操作できます。

例

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="state.count++">Increment</button>
  </div>
</template>

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

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

provide 関数の注意点

使用する際は、provide関数を使用する際、以下の点に注意してください。

1. 名前の競合

使用する際provideとinjectに、複数の親コンポーネントが同じ名前のデータを提供すると、子コンポーネントは最も近い親コンポーネントが提供したデータを受け取ります。したがって、名前の競合を避けるには、一意な名前を使用することをお勧めします。

2. リアクティブデータの処理

リアクティブデータを渡す場合、子コンポーネントはこれらのデータを直接変更できます。子コンポーネントにデータを読み取り専用にさせ、変更させたくない場合は、readonly関数を使用してリアクティブデータをラップできます。

例

import { provide, reactive, readonly } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    provide('state', readonly(state));
  }
};

Vue3 选项式 APIVue3 オプション API

その他の拡張