Loading...
Loading...
By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.
Slots are a mechanism for passing content from parent component to child placeholder inside template. With them you create flexible and reusable components, allowing parent to insert arbitrary content into predefined areas of child component.
<!-- ChildComponent.vue -->
<template>
<div class="wrapper">
<slot />
</div>
</template>
<!-- Parent.vue -->
<ChildComponent>
<p>Hello from parent!</p>
</ChildComponent>
<!-- Layout.vue -->
<template>
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>
</template>
<!-- Usage -->
<Layout>
<template #header>
<h1>Page Header</h1>
</template>
<p>Main page content</p>
<template #footer>
<p>© 2025</p>
</template>
</Layout>
<!-- List.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item" />
</li>
</ul>
</template>
<script>
export default {
props: {
items: Array
}
};
</script>
<!-- Parent.vue -->
<List :items="users">
<template #default="{ item }">
<strong>{{ item.name }}</strong> — {{ item.age }} years old
</template>
</List>
Don't modify slot props:
slot props object is available only for reading in parent template.
More information in official Vue documentation: Vue Documentation: Slots