Preface
In modern front-end development, component development has become the mainstream, and the slots feature provides strong support for us to build flexible and reusable components. This article will explore slot characteristics in depth, including basic slots, named slots, scope slots, dynamic slot names and slot default content, and explain their application scenarios and usage methods through examples.
What is a slot
Slots are used to occupy a place in a child component, allowing the parent component to dynamically insert content when using a child component. The essence of a slot is a placeholder that allows the parent component to insert custom content at a predefined location of the child component, thus achieving a high degree of reuse and flexibility of the component.
Slot Type
Basic slot
Let’s start with the basic slot (default slot). Suppose you have a Card component, we usually want the content of this component to be determined by the outside. Let’s take a look at the following example:
<!-- -->
<template>
<div class="card">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Card'
}
</script>
<style>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
Here, it is the slot. When we are using this Card component, we can pass any HTML content:
<!-- -->
<template>
<Card>
<h1>title</h1>
<p>This is a paragraph。</p>
</Card>
</template>
<script>
import Card from './'
export default {
components: {
Card
}
}
</script>
In this way, the Card component will render as:
<div class="card"> <h1>title</h1> <p>This is a paragraph。</p> </div>
Named slots
Sometimes, we need to define multiple slots in one component. This time the named slot comes in handy. We can name each slot and then fill the contents of those slots separately when using components.
Let’s take a look at a simple example:
<!-- -->
<template>
<div class="card">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
When using this component, we can:
<!-- -->
<template>
<Card>
<template v-slot:header>
<h1>title</h1>
</template>
<template v-slot:footer>
<p>Footer content</p>
</template>
<p>Subject content。</p>
</Card>
</template>
In this way, the Card component will render as:
<div class="card">
<header>
<h1>title</h1>
</header>
<main>
<p>Subject content。</p>
</main>
<footer>
<p>Footer content</p>
</footer>
</div>
Scope slots
Sometimes, a child component needs to provide some data to the slot for use by the parent component. At this time we need scope slots. The scope slot allows the parent component to pass a function to the child component, which the child component can use to render the content.
Let's take a look at an example:
<!-- -->
<template>
<ul>
<slot :items="items"></slot>
</ul>
</template>
<script>
export default {
name: 'List',
props: {
items: {
type: Array,
required: true
}
}
}
</script>
Use this List component in the parent component and use slots to pass in rendering logic:
<!-- -->
<template>
<List :items="items">
<template v-slot:default="slotProps">
<li v-for="item in " :key="">{{ }}</li>
</template>
</List>
</template>
<script>
import List from './'
export default {
components: {
List
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
}
}
</script>
In this example, slotProps is the data object provided to the slot by the child component List. We are free to use this data in the parent component.
Dynamic slot name
In some cases, the slot's name may be dynamically generated. Vue allows us to use dynamic slot names, similar to dynamic attribute binding. Let’s take a look at an example:
<!-- -->
<template>
<div>
<slot :name="dynamicSlot"></slot>
</div>
</template>
<script>
export default {
name: 'DynamicSlot',
props: {
dynamicSlot: {
type: String,
required: true
}
}
}
</script>
In the parent component, we can dynamically specify the slot name according to the conditions:
<!-- -->
<template>
<div>
<DynamicSlot :dynamicSlot="currentSlot">
<template v-slot:header>
<h1>This is the head slot content</h1>
</template>
<template v-slot:footer>
<p>This is the content of the tail slot</p>
</template>
</DynamicSlot>
</div>
</template>
<script>
import DynamicSlot from './'
export default {
components: {
DynamicSlot
},
data() {
return {
currentSlot: 'header' // Dynamically change to 'footer' to see different content }
}
}
</script>
By modifying the value of currentSlot, we can dynamically switch to display different slot contents.
Common usage
Slot default content
Sometimes we want the slot to display some default content when it is not filled. This can be done by adding default content to the tag:
<!-- -->
<template>
<div>
<slot>This is the default content，Displayed if slot content is not provided</slot>
</div>
</template>
<script>
export default {
name: 'DefaultSlot'
}
</script>
When using this component, if no slot content is provided, the default content will be displayed:
<!-- -->
<template>
<div>
<DefaultSlot></DefaultSlot>
<!-- Content can also be provided，This will overwrite the default content -->
<DefaultSlot>
<p>Custom content</p>
</DefaultSlot>
</div>
</template>
<script>
import DefaultSlot from './'
export default {
components: {
DefaultSlot
}
}
</script>
Slots and Event Delivery
In practical applications, we often need to interact with the parent component in slot content, such as passing click events. Let’s take a look at an example:
<!-- -->
<template>
<div class="button-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ButtonGroup'
}
</script>
<style>
.button-group {
display: flex;
}
</style>
In the parent component, we pass the button as slot content and listen for the button click event:
<!-- -->
<template>
<div>
<ButtonGroup>
<button @click="handleClick('Button 1')">Button1</button>
<button @click="handleClick('Button 2')">Button2</button>
</ButtonGroup>
</div>
</template>
<script>
import ButtonGroup from './'
export default {
components: {
ButtonGroup
},
methods: {
handleClick(buttonName) {
alert(${buttonName} Clicked！);
}
}
}
</script>
In this example, clicking any button will trigger the handleClick method and display the corresponding prompt message.
Slot reuse
Another powerful thing about slots is their reusable ability. By reusing slot contents between different components, maintainability and reusability of the code can be greatly improved.
<!-- -->
<template>
<div class="modal">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'Modal'
}
</script>
<style>
.modal {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
Use Modal components in different places and provide different slot contents:
<!-- -->
<template>
<div>
<Modal>
<template v-slot:header>
<h1>Modal box title1</h1>
</template>
<p>This is the content of the first modal box。</p>
<template v-slot:footer>
<button>Sure</button>
</template>
</Modal>
<Modal>
<template v-slot:header>
<h1>Modal box title2</h1>
</template>
<p>This is the content of the second modal box。</p>
<template v-slot:footer>
<button>Cancel</button>
</template>
</Modal>
</div>
</template>
<script>
import Modal from './'
export default {
components: {
Modal
}
}
</script>
In this way, we can reuse the Modal components in different contexts, and simply change the content passed to the slot.
Summarize
The slot characteristics provide great flexibility and reusability for componentized development. Through basic slots, named slots, scope slots, dynamic slot names, and slot default content, we can create highly reusable components, thereby greatly improving development efficiency and code quality.
In component development, making good use of slot features can not only simplify the code structure, but also improve the maintainability and scalability of components. I hope that through this article, you can understand the power of slots more deeply, and flexibly apply these techniques in actual development to build more elegant and efficient applications.
The above is the detailed content of Vue using slots to achieve high reusable components. For more information about Vue slots to achieve high reusable components, please pay attention to my other related articles!