Where is the boundary between using slots and props in Vue.js components?

In Vue.js, props are used to pass data from a parent component to a child component — these are static or dynamic values that the child component accepts and uses.

Slots, on the other hand, are intended for passing markup (templates) from the parent to the child component, allowing the parent to control what is displayed inside the child.

The boundary between them is as follows:

• If you need to pass data or parameters — use props.
• If you need to pass a part of the interface or markup for insertion inside the component — use slots.

For example, a button component can accept text via a prop, but if you need to pass complex content (an icon, multiple elements) — it is better to use a slot.