Slots in Vue2
Basic slot
In Vue2, the base slot allows a placeholder to be defined in the component's template and then custom content is inserted when using the component. For example, create a simpleMyBoxComponents:
<template>
<div class="box">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'MyBox'
}
</script>
<style scoped>
.box {
border: 1px solid #ccc;
padding: 10px;
}
</style>
When using:
<template>
<div>
<MyBox>
<p>This is inserted intoMyBoxContents in component slots</p>
</MyBox>
</div>
</template>
<script>
import MyBox from './';
export default {
components: {
MyBox
}
}
</script>
The base slot itself does not involve data transfer and is mainly used for simple content insertion.
Named slots
Named slots allow multiple slots to be defined in a component and distinguished by name. For example:
<template>
<div class="layout">
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
export default {
name: 'MyLayout'
}
</script>
<style scoped>
.layout {
display: flex;
flex-direction: column;
}
</style>
When using:
<template>
<div>
<MyLayout>
<template v-slot:header>
<h1>Page title</h1>
</template>
<p>Page main content</p>
<template v-slot:footer>
<p>all rights reserved &copy; 2024</p>
</template>
</MyLayout>
</div>
</template>
<script>
import MyLayout from './';
export default {
components: {
MyLayout
}
}
</script>
Named slots are also mainly used for content organization, and usually do not directly pass data. However, data-related display can be indirectly implemented in conjunction with other Vue features, such as props.
Scope slots - Data delivery
Scope slots allow subcomponents to pass data to the slots. For example, there is a user listUserListComponents need to display the user's basic information and custom operations in the list item:
<template>
<ul>
<li v-for="user in users" :key="">
<slot :user="user">
<span>{{ }} - {{ }}</span>
</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: 'Zhang San', age: 25 },
{ id: 2, name: 'Li Si', age: 30 }
]
};
}
}
</script>
When using:
<template>
<div>
<UserList>
<template v-slot:default="slotProps">
<span>{{ }} - {{ }}</span>
<button @click="handleClick()">operate</button>
</template>
</UserList>
</div>
</template>
<script>
import UserList from './';
export default {
components: {
UserList
},
methods: {
handleClick(user) {
(`To the user${}进行operate`);
}
}
}
</script>
Here subcomponentUserListpassslotProperties of tags:user="user"Pass user data to slots, when the parent component uses slots,v-slot:default="slotProps"Receive data,slotPropsis an object that contains the child components passeduserdata.
Slots in Vue3
Vue3 basically continues the syntax of Vue2 in the use of slots, but has improved in some details.
Scope slots - Data delivery
In Vue3, usev-slotThe instructions are more concise. For example, create aMyListComponent display product list:
<template>
<ul>
<li v-for="item in items" :key="">
<slot :item="item">{{ }}</slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'apple', price: 5 },
{ id: 2, name: 'banana', price: 3 }
]
};
}
}
</script>
When using:
<template>
<div>
<MyList>
<template v-slot="{ item }">
<span>{{ }} - price: {{ }}</span>
</template>
</MyList>
</div>
</template>
<script>
import MyList from './';
export default {
components: {
MyList
}
}
</script>
herev-slotThe object is deconstructed later, and the data passed by the child component is directly obtained.item, more concise and intuitive than Vue2. At the same time, in Vue3, it can also be usedv-slotWith dynamic parameters, more flexible data transfer and slot usage are achieved.
Slots in Nuxt
Nuxt2
In Nuxt2, slots are widely used in page layouts and components. For example, in the defaultlayouts/middle:
<template>
<div>
<nuxt-head></nuxt-head>
<header>
<slot name="header"></slot>
</header>
<main>
<nuxt></nuxt>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
When used in the page:
<template>
<div>
<template v-slot:header>
<h1>My page title</h1>
</template>
<p>Page content</p>
<template v-slot:footer>
<p>Information at the bottom of the page</p>
</template>
</div>
</template>
For data transfer, Nuxt2 can be passed in the page componentthis.$root.$dataAccess global data in other ways, and then display it in the slot content. For example,layouts/Define a global website name data inheaderDisplayed in slots:
<template>
<div>
<nuxt-head></nuxt-head>
<header>
<slot name="header">{{ $root.$ }}</slot>
</header>
<main>
<nuxt></nuxt>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
data() {
return {
siteName: 'My website'
};
}
}
</script>
When used in the page:
<template>
<div>
<template v-slot:header>
<h1>{{ $root.$ }} - Page title</h1>
</template>
<p>Page content</p>
<template v-slot:footer>
<p>Information at the bottom of the page</p>
</template>
</div>
</template>
Nuxt3
Nuxt3 is based on Vue3, and the use of slots is simpler and more powerful. For example,layouts/middle:
<template>
<div>
<Head />
<header>
<slot name="header" />
</header>
<main>
<slot />
</main>
<footer>
<slot name="footer" />
</footer>
</div>
</template>
Use in the page:
<template>
<div>
<template #header>
<h1>Nuxt3Page title</h1>
</template>
<p>Nuxt3Page content</p>
<template #footer>
<p>Nuxt3At the bottom of the page</p>
</template>
</div>
</template>
In terms of data transfer, Nuxt3 can utilize the combination APIuseStateWait for functions to share data. For example, create a shared user login status data,headerDifferent contents are displayed in the slot according to the login status:
<template>
<div>
<Head />
<header>
<slot name="header">
<template v-if="isLoggedIn">
<span>welcome，{{ }}</span>
</template>
<template v-else>
<a href="/login" rel="external nofollow" >Log in</a>
</template>
</slot>
</header>
<main>
<slot />
</main>
<footer>
<slot name="footer" />
</footer>
</div>
</template>
<script setup>
import { useState } from '#imports';
const { state: user, isLoggedIn } = useState('user', () => ({
name: '',
loggedIn: false
}));
</script>
When used in the page:
<template>
<div>
<template #header>
<!-- Here you can override the default according to your needsheaderSlot content -->
</template>
<p>Nuxt3Page content</p>
<template #footer>
<p>Nuxt3At the bottom of the page</p>
</template>
</div>
</template>
Summarize
Slots are very important features in Vue2, Vue3 and different versions of Nuxt. They can not only enable flexible insertion of content, but also enable data transmission through scoped slots and other methods. By rationally using slots and their data transfer functions, components can be reusable and flexible, and more complex and efficient applications can be built. Whether it is a basic slot, a named slot or a scope slot, it plays a key role in different scenarios. Developers need to choose appropriate slot usage methods and data delivery strategies based on specific needs.
This is the article about the use of slots in front-end Vue2, Vue3 and different versions of nuxt. For more related content on vue and nuxt slots, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!