Vue Academy · レッスン

親コンポーネントでのprovide()

プリミティブ値、リアクティブなref、オブジェクトの提供と、provideを通じてリアクティビティを維持する方法について学習します。

レッスン 2/413 ステップ

「親コンポーネントでのprovide()」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

provide 関数

Vue の provide を使うと、コンポーネントのすべての子孫にデータを提供できます。<script setup> でキーと値を指定して呼び出します。

import { provide } from "vue";
provide("message", "Hello from ancestor");

任意の子孫が inject できる

一度提供されると、ツリー内でどれだけ深い階層にあるコンポーネントでも、同じキーを inject できます。途中のコンポーネントで特別な処理をする必要はありません。

App (provides "message")
  -> ... -> DeepChild (injects "message")

リアクティブな state を提供する

子孫のリアクティブ性を維持するには、通常の値ではなく ref（またはリアクティブなオブジェクト）を提供します。ref の更新は、すべての利用側に自動的に伝わります。

import { provide, ref } from "vue";
const theme = ref("dark");
provide("theme", theme);

リアクティビティは下へ伝わる

祖先コンポーネントが theme.value を変更すると、それを inject したすべての子孫が新しい値で再レンダリングされます。これが、静的なスナップショットを渡す方法に対する重要な利点です。

function toggle() {
  theme.value = theme.value === "dark" ? "light" : "dark";
}

readonly で state を保護する

デフォルトでは、子孫コンポーネントが inject した ref を変更できるため、state の変更が分散し、一方向データフローが崩れる可能性があります。値を readonly() でラップすると、利用側は読み取りだけを行い、書き込みはできなくなります。

import { provide, ref, readonly } from "vue";
const user = ref({ name: "Ada" });
provide("user", readonly(user));

関数をアクションとして提供する

子孫コンポーネントから変更を要求できるようにするには、readonly の state と一緒に関数を提供します。利用側はその関数を呼び出し、変更元を更新するのは提供側だけにします。

function updateName(name) {
  user.value.name = name;
}
provide("user", readonly(user));
provide("updateName", updateName);

state とアクションをまとめる

readonly の state とそのアクションを 1 つのオブジェクトにまとめて提供するのが、すっきりしたパターンです。小さな store に似た構成になります。

provide("userStore", {
  user: readonly(user),
  updateName
});

アプリケーションレベルの provide

アプリケーションレベルで provide することもできます。そうすると、アプリインスタンス上で一度設定した値を、すべてのコンポーネントから利用できるようになります（詳しくは後で説明します）。

app.provide("appName", "CoddyKit");

衝突を避けるための Symbol キー

大規模なアプリでは、文字列キーが衝突する可能性があります。共有モジュールから export した Symbol をキーとして使うと、確実に一意にできます。

// keys.js
export const themeKey = Symbol("theme");
// provider:
provide(themeKey, theme);

provide を使う場面

provide は、テーマ、現在のユーザー、i18n、フォームコンテキスト、機能設定など、サブツリーで必要になる値に適しています。1 つか 2 つの階層に渡すだけなら、通常の props のほうがシンプルです。

Provider のスコープ

提供された値のスコープは、提供元コンポーネントのサブツリーに限定されます。2 つの兄弟サブツリーが同じキーで異なる値を提供しても、互いに影響しません。

確認問題

子孫コンポーネントによる提供済み state の変更を防ぐには、どうすればよいでしょうか。

対話的なレッスンで答える

まとめ

provide(key, value) によって、すべての子孫にデータを公開できることを学びました。リアクティビティを維持するには ref を提供し、変更を防ぐには readonly() でラップします。関数はアクションとして提供し、衝突を避けるために Symbol キーを優先します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「親コンポーネントでのprovide()」レッスンは無料ですか？

はい。「親コンポーネントでのprovide()」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「親コンポーネントでのprovide()」で何を学びますか？

プリミティブ値、リアクティブなref、オブジェクトの提供と、provideを通じてリアクティビティを維持する方法について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「親コンポーネントでのprovide()」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る