components Register Child Components
Last updated: 2026-10-22
components Register Child Components
The components option registers child components locally, keeping them scoped to this component.
| Group | Options: Composition & Misc |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
components: { TodoItem }
}⚙️ Arguments
| value | An object mapping names (kebab-case allowed) to definitions |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
Renders two todo items.💡 Key Points
💡 Tip Prefer local registration — clearer dependencies and better tree-shaking.
ℹ️ Note Register kebab-case names for in-DOM templates.
⚠️ Warning Global registration exposes the component everywhere — reserve it for a few base components.
🏷️ Related Composition & Misc
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from global registration?
A Local stays scoped and tree-shakable; global is everywhere but bulky.
Q Must the name be kebab-case?
A Required in DOM templates; SFCs accept both.
Q Can registration be dynamic?
A Rare — prefer <component :is> for dynamic switching.
