Vue · Junior · Question 31 of 75

How do you pass markup from a parent into a child component?

<!-- Card.vue -->
<div class="card"><slot /></div>

<!-- usage -->
<Card><p>Any content</p></Card>

✓Correct answer: With slots: the child renders <slot /> where the parent's content should appear
2With a children prop like in React
3By passing HTML as a string prop

Explanation

Content between <slot> tags is the fallback when the parent passes nothing. Named slots (<slot name="header" />) allow several insertion points.

Further reading

Vue: Slots ↗

Test yourself

Take the Vue · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.