Slot using
This section is mainly explained by code
- Anonymous slot.
- A named slot.
- Scope of the slot.
Anonymous slot.
Start by defining two components, one child and one parent
<template> <div> <p> I am the child's text </p> <span class="custom-button"</span> <slot></slot> </div> </template> <style>. Custom -button{color: RGB (51, 51, 51);#fff;
width:300px;
height:60px;
line-height:60px;
background-color: #409eff;
padding: 10px 20px;
font-size: 14px;
border-radius:6px;
}
</style>
Copy the codeParent component <template> <div id="myvideo">
<child></child>
</div>
</template>
<script>
import child from './demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
<style scoped>
</style>
Copy the codeThen we can see that the browser renders like this
<div id="myvideo">
<div data-v-be15bc60=""> <p> I am the text of the child component </p> <span class="custom-button"</span> </div> </div>Copy the codeA slot is something that allows a parent component to insert something into a child component called a slot or a placeholder and now we insert something into a child component
// Parent component <template> <div id="myvideo">< child><h1> I insert an H1 tag here </h1></child> </div> </template> <script> import child from'./demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
<style scoped>
</style>
Copy the codeThere’s a tag inserted into the child component so how does the browser render it
<div id="myvideo">
<div data-v-be15bc60=""> <p> I am the text of the child component </p> <span class="custom-button"</span> <h1> I insert an H1 tag here </h1> </div> </div>Copy the codeSomebody said if the parent component is passing a lot of data what’s going to be inserted if you’re interested in trying it out for yourself it’s all inserted
At this point, some thoughtful kids ask can you give a default value to slot if there is no insert content?
That’s a very thoughtful question to ask and we all know that functions have default values and slot has default values and we can write it that way
// Parent component <template> <div id="myvideo">
<child></child>
</div>
</template>
<script>
import child from './demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
Copy the code// Child <template> <div> <p> I am the text of the child </p> <span class="custom-button"</span> <slot><b> Display default b tag if there is no content </b></slot> </div> </template> <style>. Custom -button{color:#fff;
width:300px;
height:60px;
line-height:60px;
background-color: #409eff;
padding: 10px 20px;
font-size: 14px;
border-radius:6px;
}
</style>
Copy the codeThe browser will parse it this way
<div> <p> I am the child component of the text </p> <span class="custom-button"</span> <b> Displays the default B tag if there is no content </b> </div>Copy the codeThe idea of slot is similar to that of a function and I’ll talk a little bit about what that idea is
A named slot.
Named slots are useful for a lot of things. For example, if you have a generic navigation bar component that has a navigation bar with search and a navigation bar with back and a navigation bar with share, then you need a named slot to insert content in the right place and I’ll give you an example
// Child <template> <div> <p> I am the text of the child </p> <span class="custom-button"< span> <slot name="left"></slot>
<slot name="right"></slot>
<slot name="center"></slot>
</div>
</template>
<style>
.custom-button{
color: #fff;
width:300px;
height:60px;
line-height:60px;
background-color: #409eff;
padding: 10px 20px;
font-size: 14px;
border-radius:6px;
}
</style>
Copy the code// Parent component <template> <div id="myvideo">
<child>
<span slot="left"> Left returns </span> <span slot="right"<span > <span slot="center"</span> <h1> nothing </h1> </child> </div> </template> <script> import child from'./demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
Copy the codeHow does the browser render?
<div> <p> I am the child component of the text </p> <span class="custom-button"</span> <span> Left side returns </span> <span> right side share </span> <span> Middle search </span> </div>Copy the codeA named slot is a slot that has a name, which means that the slot belongs to a subcomponent. The name of the slot is left. In other words, this slot is reserved for a slot called left and no one else can occupy it Slot =”left”> is discarded
In fact, if you think about it, it’s like buying a ticket to go to a movie. Each seat is a slot and the seat number is the name. The ticket in your hand determines where you sit
Scope of the slot.
You see the red that I’ve marked here indicates that this is an important point
Sometimes we make a component like a list presentation component
Like this
- Go shopping today
- I saw something
- Beans on top
- I can’t count them
Someone said it’s easy to write components like this
Write the following code in one action
// Subcomponent <template> <div> <ul> <li v-for="(item,index) in items" :key="index">{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items:['Go shopping today'.'Saw something'.'Beans on top'.'Too many to count']
}
}
}
</script>
Copy the code,
// Parent component <template> <div id="myvideo">
<child></child>
</div>
</template>
<script>
import child from './demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
Copy the codeGood for the ingenuity of the kid, but then another kid got a request that instead of rendering as an unordered list, it should be rendered as a comma, something like that
Go shopping today, see an east east, the beans above, the number is not clearCopy the codeSo what do you do? So here we have scoped slot. What is scoped slot? It’s not even very clear on the website that the scope slot is actually a slot that passes data and the child component passes data to the parent component but how to render it depends on the mood of the parent component so let’s write some code, okay
// Subcomponent <template> <div> <slot :item="items"></slot>
</div>
</template>
<script>
export default {
data () {
return {
items:['Go shopping today'.'Saw something'.'Beans on top'.'Too many to count']
}
}
}
</script>
Copy the code// Parent component <template> <div id="myvideo">
<child>
<template slot-scope="scope">
<li>
{{scope.item.join(', ')}}
</li>
</template>
</child>
</div>
</template>
<script>
import child from './demo'
export default{
data() {return {
}
},
components:{
child
}
}
</script>
Copy the code