mergeProps() 属性オブジェクトのマージ

最終更新：2026-10-22

mergeProps() は複数の属性オブジェクトをマージします。class と style は連結され、イベントリスナーはすべて保持され、それ以外の属性は後ろの値が前を上書きします。

📝 構文

mergeProps(baseProps, { class: "extra", onClick: fn })

...args	2 つ以上の属性オブジェクト

戻り値：マージされた新しいオブジェクト

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

出力：

Shows 'a b / id=two'.

ℹ️ 補足 高階コンポーネントや属性の転送でよく使われます。コンポーネント自身の props と親からの透過属性をマージします。

💡 ヒント Vue の特殊ルールを理解しています。class/style は上書きではなくマージされ、onXxx はすべて保持されます。

⚠️ 注意 浅いマージのみです。ネストしたオブジェクトは再帰的にマージされません。

Q Object.assign との違いは？

A assign は class を上書きしてしまいます。mergeProps は Vue のルールに従って class/style を連結し、リスナーを保持します。

Q イベントは上書きされますか？

A されません。onXxx はすべて保持され（順に発火します）。

Q 手動で使うものですか、自動ですか？

A コンポーネントの v-bind 透過は自動的にマージされます。手動で使うのはレンダー関数を書く場合です。

Web-Tutorial 技術チーム

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