provide 子孫へのデータ提供（Options API）
最終更新：2026-10-22
provide 子孫へのデータ提供（Options API）
provide オプションはデータを下方向へ提供します。静的な値にはオブジェクト、this から派生する値には関数を使います。
| グループ | オプション: 合成とその他 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
data() { return { theme: "dark" } },
provide() {
return { theme: this.theme } // note: a snapshot
}
}⚙️ 引数
| value | オブジェクト、またはオブジェクトを返す関数（関数形式では this を使えます） |
|---|
戻り値：戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The deep child shows 'Injected theme: dark'.💡 ポイント
⚠️ 注意 素のオブジェクトリテラルはスナップショットです。リアクティブにするには ref を提供してください。
💡 ヒント Composition API と鍵名を揃えておくと移行が容易です。
ℹ️ 補足 オプション形式では素のオブジェクトの鍵を使います。
🏷️ 関連合成とその他
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q 提供した data の値が更新されないのはなぜですか？
A 初期化時にスナップショットが取られるためです。代わりにリアクティブなオブジェクトを提供してください。
Q Composition API と混在できますか？
A できます。仕組みは共通で、鍵名によって対応付けられます。
Q 関数形式はいつ使いますか？
A 値が this から派生するときです。
