inject 祖先データの注入（Options API）

最終更新：2026-10-22

inject オプションは依存を宣言します。デフォルト値なしの配列、または from と default を持つオブジェクトが使えます。

📝 構文

export default {
  inject: ["theme"],
  // or with a default
  inject: {
    theme: { from: "theme", default: "light" }
  }
}

value	鍵名の配列、または from と default を持つオブジェクト

戻り値：注入された値は this.xxx としてインスタンスに乗ります

以下のコードを編集して結果を確認しましょう：

出力：

Without a provider it shows 'Theme: light by default'.

💡 ヒント オブジェクト形式では、from が提供側の鍵名になります。

⚠️ 注意 共有オブジェクトのデフォルト値は避けてください。インスタンス間で漏れます。

ℹ️ 補足 注入された ref はリアクティブ性を保ち、テンプレート内で自動的にアンラップされます。

Q 配列とオブジェクト形式はどう使い分けますか？

A デフォルト値や別名が必要ならオブジェクト形式を使います。

Q 提供元がないとエラーになりますか？

A 配列形式は undefined になり、オブジェクト形式はフォールバックします。

Q メソッドを注入できますか？

A できます。関数を readonly な状態と一緒に提供してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。