javascript / beginner
Snippet
Content Distribution with Slots
Slots allow a component to accept arbitrary content (HTML or other components) from its parent. The <slot> tag acts as a placeholder where that content will be rendered.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<!-- ChildComponent.vue --><template><button class="fancy-button"><slot></slot> <!-- Placeholder for parent content --></button></template><!-- ParentComponent.vue --><ChildComponent>Submit Form</ChildComponent>
vue
Breakdown
1
<slot></slot>
The injection point where content passed between the component tags will appear.