Slot
- The slot of the component is to make the components we encapsulate more scalable
- Allow users to decide what to display in the component
- The method of encapsulating the socket: extract the commonality and keep the difference
- The best way to encapsulate is to extract commonalities into components and expose differences as slots
- Once the slot is reserved, users can decide what to insert in the slot according to their needs
- The role of the slot is to mix the content of the parent component with the template of the child component itself
<div id='father'>
<h1>{
{ name }}</h1>
<son></son>
</div>
<template id='son'>
<div>
<h1>{
{ name }}</h1>
</div>
<template>
const son = {
template:'#son',
data() {
return {
name:'我是儿子'
}
}
}
const father = new Vue({
el:"#father",
data:{
name:'我是爹'
},
components:{
son }
})
Print it on the page and see. It’s
good, both father and son are out.
When we use our son, we use it like this
<div id='father'>
<!-- 省略 -->
<son></son>
</div>
However, if we write this way, can this string of text appear?
<son>插槽要来了插槽要来了</son>
Print it
-
In fact, the reason why it can’t appear, we also know that when the page is rendered, the child component, that is, the template tag, replaces the son tag that is being used, so the string of text does not appear.
-
This obviously does not conform to the idea of component reusability
-
Don't be afraid, sister enter will teach you how to do it
-
It’s actually very simple, we just need to do this
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot></slot>
</div>
</template>
- After adding the slot tag, the string of text can be displayed
- Brothers who love to learn must have opened the NetEase Youdao Dictionary. In fact, the word slot means location and slot means
Print it on the page to see
Named slot
-
As the name implies, it is a slot with a name
-
In the above code, if I define three slots for the sub-component, where is the string of text inserted?
-
First wrap the string of text with p tags
<div di='father'>
//...
<son><p>插槽要来了</p></son>
</div>
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
Practice is the only criterion for testing truth, we print it to the page to see
- It can be seen that there are three slots in our son label, but only one plug (p label) is provided
- This plug will plug into all the sockets
- We also give him three plugs
<div id="father">
<h1>{
{ name }}</h1>
<son>
<p>我是下面的白熊</p>
<p>我是上面的棕熊</p>
<p>我是中间的熊猫</p>
</son>
</div>
Sister enter likes our bare bears. I will give you an Amway by the way.
Print to the page to see
- It can be seen that these three p tags have been reused three times
- So how to avoid this situation and make the three bears stack together in order?
- At this time, you can use the named slot
<div id="father">
<h1>{
{ name }}</h1>
<son>
<p slot='bottom'>我是下面的白熊</p>
<p slot="top">我是上面的棕熊</p>
<p slot="center">我是中间的熊猫</p>
</son>
</div>
<template id="son">
<div>
<h1>{
{ name }}</h1>
<slot name='top'></slot>
<slot name='center'></slot>
<slot name='bottom'></slot>
</div>
</template>
- Add the name attribute to the slot slot of the son component
- Add the slot attribute to the label used by the parent component
- If the two attributes are the same, it will be inserted into the corresponding slot
Take a look at the page effect
Slot default label
- When using named slots, you can also set a default label
- For example, I want tobottomSet a default value in the slotbuttonButton
- When no one is plugged in this slot,buttonWill show up
- Can be written like this
<!-- <p slot='bottom'>我是下面的白熊</p> -->
<slot name='bottom'><button>按钮</button></slot>
Take a look at the page effect
Where is the data for the slot
- When you use a variable in a component, you will first see which template the variable is in, and use the variable in the Vue instance of the corresponding template
Let the white bear follow oneon one
<p slot='bottom'>我是下面的白熊{
{ num }}</p>
inSon componentSet one inon oneValue is50
const son = {
template:"#son",
data() {
return {
name:'我是儿子',
num:50
}
}
}
inDaddy componentSet one inon oneValue is10
const father = new Vue({
el:'#father',
data:{
name:'我是爹',
num:10
},
components:{
son }
})
So the question is, which num will the white bear use?
Print it on the page to see
