provide() 子孫に依存を提供する
最終更新：2026-10-22
provide() 子孫に依存を提供する
provide() は祖先コンポーネントからデータを提供し、どの階層の子孫でも inject で受け取れます。props を毎階層バケツリレーする必要がありません。
| グループ | 依存性の注入 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
provide("theme", ref("dark"))
provide("config", readonly(config)) // おすすめ：読み取り専用で提供する⚙️ 引数
| key | 文字列または Symbol の依存キー |
|---|---|
| value | 任意の値（ref やリアクティブなオブジェクトはリアクティブ性を保てます） |
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The child shows 'Injected theme: dark'.💡 ポイント
💡 ヒント ref / reactive のデータを提供すれば子孫でもリアクティブ性が保たれます。普通の値を渡すと一回きりのスナップショットになります。
⚠️ 注意 readonly を組み合わせて提供するのがおすすめです。書き込み可能な状態をそのまま晒すと、どの子孫でも祖先のデータを変更できてしまいます。
ℹ️ 補足 キー名は Symbol 定数にすると名前の衝突を避けられます（大きなプロジェクトやライブラリで推奨）。
🏷️ 関連依存性の注入
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q props との違いは何ですか？
A props は階層ごとに明示的に渡します。provide / inject は階層を越えて直接届きますが、データの出所が props ほど分かりにくいため、テーマや設定のようなグローバルな文脈に向いています。
Q provide したデータは変更できてしまいますか？
A できます（子孫は参照を受け取るので）。そのため、readonly を提供するか、変更用の関数を提供するのがおすすめです。
Q 同じ名前のキーは衝突しますか？
A 一番近い提供者が優先されます。Symbol キーを使えば衝突を完全に避けられます。
