Because I feel confused when looking at the source document
Instead, collect blogs online and understand them thoroughly
Reprinted from: https://www.cnblogs.com/chinabin1993/p/9115396.html
Vue slot is an essential part of learning Vue. When I first came into contact with Vue, I knew a little about these, especially the scope slot.
More and more slots are found to be easy to use in the back.
Share some knowledge about slots.
Here are some points:
1. What can be placed in the slot?
2. Default slot
3. Named slot
4. Scope slot
1, Slot content
In a word: there can be any content in the slot.
First look at the following code: declare a child component component,
If I want to put some content in < child component > < / child component >, what will be the result?
<div id="app">
<child-component></child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>Hello,World!</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
<child-component>Hello</child-component>
The output content is still in the component, and the content written in < child component > does not work.
This is what slots do.
Let's now add a < slot > < / slot > slot to the component
The "hello" we wrote in < child component > < / child component > has worked!!!
Vue.component('child-component',{
template:`
<div>
Hello,World!
<slot></slot>
</div>
`
})
By now, we know what a slot is:
Slot is a set of content distribution API implemented by Vue, which takes the < slot > < / slot > element as the exit to host the distribution content.
This sentence means that some contents in the component tag without slots will not work. When I declare the slot element in the component, I write the contents in the component element
Will run to it!
2, Named slot
Named slot is to give a name to this slot
In the component, I give the slot a name, one is called "girl", one is called "boy", and the other is not named.
Then, in < child component > < / child component >, the content corresponding to the slot attribute will correspond to the name in the component one by one.
If there is no name, it is the default slot!!
<div id="app">
<child-component>
<template slot="girl">
Beautiful, beautiful, shopping, shopping
</template>
<template slot="boy">
Handsome and practical
</template>
<div>
I'm a kind of person,
I am the default slot
</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template:`
<div>
<h4>There are not only men and women in this world</h4>
<slot name="girl"></slot>
<div style="height:1px;"></div>
<slot name="boy"></slot>
<div style="height:1px;"></div>
<slot></slot>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
3, Default slot
It has been introduced above and will not be described here
4, Scope slot
I haven't understood the scope slot before!!!
To put it bluntly, it is my attribute on the component, which can be used in the component element!
Let's take a look at the simplest example!!
We define an attribute say (arbitrarily defined!) on the < slot > < / slot > element, Next, use the component child, and then add the attribute slot scope on the template element!! Name yourself a
We print a and find that it is {"say": "hello"}, that is, the key value pair composed of the attributes and values on the slot!!!
This is the scope slot!
I can use the attribute / value on the component on the component element!!
<div id="app">
<child>
<template slot-scope="a">
<!-- {"say":"Hello"} -->
{{a}}
</template>
</child>
</div>
<script>
Vue.component('child',{
template:`
<div>
<slot say="Hello"></slot>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
Take another look at the following example:
<div id="app">
<child :lists="nameList">
<template slot-scope="a">
{{a}}
</template>
</child>
</div>
<script>
Vue.component('child',{
props:['lists'],
template:`
<div>
<ul>
<li v-for="list in lists">
<slot :bbbbb="list"></slot>
</li>
</ul>
</div>
`
})
let vm = new Vue({
el:'#app',
data:{
nameList:[
{id:1,name:'Sun WuKong'},
{id:2,name:'Zhu Bajie'},
{id:3,name:'Sand monk'},
{id:4,name:'Tang Monk'},
{id:5,name:'Little white dragon'},
]
}
})
</script>
Take a look at the output
This is so useful, brothers!!!
So I can play around on this element!!
When id equals 1, I add hello in front of me.
I can operate according to the attribute value of this object at will!
<child :lists="nameList">
<template slot-scope="a">
<div v-if='a.bbbbb.id==1'>Hello:<span>{{a.bbbbb.name}}</span></div>
<div v-else>{{a.bbbbb.name}}</div>
</template>
</child>
last! If you have used elementui, you must know that this is how the form comes!!
This is the essence of the form!