javascript / beginner
Snippet
Content Distribution with Slots
Slots allow you to pass HTML or other components into a component's template, making components highly reusable as containers.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<!-- MyButton.vue --><template><button class="btn"><slot>Default Label</slot></button></template><!-- App.vue --><MyButton>Click Me!</MyButton>
vue
Breakdown
1
<slot>
Acts as a placeholder where the parent's content will be rendered.
2
Default Label
The fallback content shown if the parent provides no content.