props 親コンポーネントからデータを受け取る

最終更新：2026-10-22

props オプションは、コンポーネントが受け取る属性を宣言します。配列の省略記法、または型・必須・デフォルト値の検証を指定できるオブジェクト構文が使えます。

📝 構文

export default {
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  }
}

value	配列またはオブジェクト：オブジェクト形式では type / required / default / validator を指定できます

戻り値：親から渡された値。読み取り専用です（単方向データフロー）

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

出力：

Shows 'Greeting (3 items)'.

⚠️ 注意 単方向データフロー：prop を直接変更してはいけません。変更が必要なときはイベントを emit して親に更新させます。

💡 ヒント オブジェクトや配列のデフォルト値はファクトリ関数が必要です：default: () => [] （default: [] ではなく）。

ℹ️ 補足 kebab-case の属性は camelCase の props に対応します：:post-title を渡すと postTitle として宣言された prop に届きます。

Q 子コンポーネントが prop を変更するとどうなりますか？

A 開発環境では警告が出て、親が再レンダリングすると変更は上書きされます。emit で親に変更させてください。

Q デフォルト値にオブジェクトを書くと、なぜ警告が出るのですか？

A 複数インスタンスが同じオブジェクトを共有してしまうためです。() => ({}) のファクトリ関数で各インスタンスに新しいコピーを渡します。

Q prop の変化を監視できますか？

A できます。watch: { title(newVal) { ... } } のように名前で監視するか、computed で派生させてください。

Web-Tutorial 技術チーム

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