Recently, I was asked if I knew about Vue's slots. When I first thought about it, it seemed that I rarely used this stuff. So I sorted out some usages of slot.
slot (the parent component inserts content at the child component <slot> </slot>)
Vue implements a set of content distribution APIs, and uses <slot>elements as outlets for carrying and distributing content. This is the description on the vue document. Specifically, a slot is a "space" that allows you to add content within the component. for example:
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
</div>
</template>
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton> </ebutton>
</div>
</template>
We know that if you directly want to add content to the <ebutton></ebutton> in the parent component, it will not be rendered on the page. So how do we enable the added content to be displayed? Just add slot in the sub-component.
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button></button>
<slot></slot> //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）
</div>
</template>
The child component can add a slot at any position, and this position is the display position of the content added by the parent component.
Compile scope (the parent component inserts data at the child component <slot> </slot>)
As we learned above, a slot is actually a'space' that allows us to add content from the parent component to the child component. We can add any data value in the parent component, for example:
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton> {
{ parent }}</ebutton>
</div>
</template>
new Vue({
el:'.app',
data:{
parent:'父组件'
}
})
The syntax for using data has not changed at all, but can we directly use the data in the sub-components? Obviously not! !
// 子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot></slot>
</div>
</template>
new Vue({
el:'.button',
data:{
child:'子组件'
}
})
// 父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton> {
{ child }}</ebutton>
</div>
</template>
It is not possible to directly pass in the data in the sub-component. Because: all content in the parent template is compiled in the parent scope; all content in the child template is compiled in the child scope.
Back-up content (sub-component <slot> </slot> set default value)
The so-called back content is actually the default value of the slot. Sometimes I do not add content in the parent component, then the slot will display the default value, such as:
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot> 这就是默认值 </slot>
</div>
</template>
Named slot (multiple sub-components <slot></slot> <slot></slot> corresponding to the inserted content)
Sometimes, there may be more than one slot in the child component, so how do we insert the corresponding content in the parent component exactly where we want it? Just give the slot a name, that is, add the name attribute.
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one'> 这就是默认值1</slot>
<slot name='two'> 这就是默认值2 </slot>
<slot name='three'> 这就是默认值3 </slot>
</div>
</template>
The parent component adds content through v-slot: name:
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton>
<template v-slot:one> 这是插入到one插槽的内容 </template>
<template v-slot:two> 这是插入到two插槽的内容 </template>
<template v-slot:three> 这是插入到three插槽的内容 </template>
</ebutton>
</div>
</template>
Of course, for convenience, vue can be abbreviated as #one when writing the form of v-slot:one
Scope slot (the parent component uses the child component data at the child component <slot> </slot>)
Through slot we can add content to the parent component for the child component. By naming the slot, we can add content in more than one location. But the data we add is in the parent component. We said above that we cannot directly use the data in the sub-components, but do we have other ways to allow us to use the data in the sub-components? In fact, we can also use the v-slot method:
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据
<slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据，这里我没有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton>
<template v-slot:one = 'slotone'>
{
{ slotone.value1 }} // 通过v-slot的语法 将子组件的value1值赋值给slotone
</template>
<template v-slot:default = 'slottwo'>
{
{ slottwo.value2 }} // 同上，由于子组件没有给slot命名，默认值就为default
</template>
</ebutton>
</div>
</template>
In summary:
- First, dynamically bind a value to the slot of the child component (:key='value')
- Then in the parent component, assign this value to values through v-slot: name ='values'
- Finally , obtain the data through { {values.key }}