mergeProps() Merge Props Objects
Last updated: 2026-10-22
mergeProps() Merge Props Objects
mergeProps() merges prop objects — class and style concatenate, listeners all survive, later values win elsewhere.
| Group | Render Functions & SSR |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
mergeProps(baseProps, { class: "extra", onClick: fn })⚙️ Arguments
| ...args | Two or more props objects |
|---|
Returns：A merged object
▶ Example
Edit the code below and see the live result:
Output：
Shows 'a b / id=two'.💡 Key Points
ℹ️ Note Common in higher-order components merging local and inherited props.
💡 Tip It follows Vue's class, style and listener rules.
⚠️ Warning Shallow only — nested objects are not recursed.
🏷️ Related Render Functions & SSR
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from Object.assign?
A assign overwrites classes; mergeProps follows Vue semantics.
Q Are listeners overwritten?
A No — all listeners run in order.
Q Manual or automatic?
A Attribute fallthrough merges automatically; manual render code needs it.
