concept
A simple understanding is that one or more slots are left inside the component for the component to pass the corresponding template code into. The emergence of slots makes components more flexible.
1. Anonymous Slots
parent component
<son>
<p>我是父组件通过匿名插槽传输的内容</p>
</son>
Subassembly
<template>
<div>
我是子组件
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
style
Of course, you can also write content directly on the slot tag, such as
<son>
</son><template>
<div>
我是子组件
<slot>我是后补内容</slot>
</div>
</template>
<script>
export default {
}
</script>
The vernacular means that the parent component does not transfer content. Sometimes it is useful to set specific fallback (i.e. default) content for a slot, which will only be rendered when no content is provided.
2. Named slot
As the name suggests, it is a named slot. If you need to reserve multiple slot locations inside the component, you need to define a name for the slot and specify the insertion location.
Vue version 2.6.0+ uses v-slot instead of slot and slot-scope.
Note:
1. The content of the named slot must be wrapped with template <template></template>;
2. Templates without specified names are inserted into anonymous slots. It is recommended to use named slots to facilitate code tracking and be intuitive and clear;
3. Anonymous slots have the hidden name "default;"
2.1 Abbreviation of named slot
Like v-on and v-bind, v-slot also has an abbreviation, which replaces everything before the parameter (v-slot:) with the character #.
For example v-slot:header can be rewritten as #header;
however, like other directives, this abbreviation is only available if it has parameters. This means that the following syntax is invalid:
parent component
<son :title="name">
<template #header><p>我是头部</p></template>
<template #body><p>我是身体</p>
</template>
<template v-slot:[name]><p>我是脚部</p>
</template>
</son>Subassembly
<template>
<div>
我是子组件{
{title}}
<slot name="footer"></slot>
<slot name='body'></slot>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
2.2 Dynamic slot name
Dynamic command parameters can also be used on v-slot to define dynamic slot names.
<template v-slot:[name]><p>我是脚部</p>
</template>3. Scope slot
3.1 From father to son
parent component
<son :title="name">
<template #header><p>我是头部</p></template>
<template #body><p>我是身体</p>
</template>
<template v-slot:[name]><p>我是脚部</p>
</template>
</son>
</el-row>Subassembly
<template>
<div>
我是子组件{
{title}}
<slot name="footer"></slot>
<slot name='body'></slot>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
The slot content passed by the parent component is compiled by the child component, and the slot scope is determined by the child component.
So if you need to dynamically modify the content of the slot, you need to pass parameters from the subcomponent to the parent component.
3.2 Child and Father
The parent component passes parameters to the child component, and after receiving the props, the slot passes the parameters back to the parent component through the binding attribute. Whether it is template code or data, the control is completely in the hands of the parent component.
first way
parent component
<son :title="name">
<template #header="header">{
{header.header}}</template>
<template #body="body">{
{body.body}}
</template>
<template #footer="footer">{
{footer.footer}}
</template>
</son>Subassembly
<template>
<div>
我是子组件
<slot name="footer" :footer="title.footer"></slot>
<slot name='body' :body="title.body"></slot>
<slot name="header" :header="title.header"></slot>
</div>
</template>
<script>
export default {
props: {
title: Object
}
}
</script>
style
Second way
子组件通过属性 <slot :自定义属性名 = '值'></slot>，将自己内部的原始类型给到父组件；
父组件 <template slote-scope='自定义接收'></template>；
子组件 slot 除了要占个位置还要传递参数，父组件 slote-scope 负责接收参数；
parent component
<son :list="provinces">
<template slot-scope="slotProps">
<h4 v-for="city in slotProps.cities" :key="city.id" >
城市： {
{city.name}}
</h4>
</template>
</son>Subassembly
<template>
<div class="footerComponent">
<div v-for="item in list" :key="item.id">
<h2>省份：{
{item.name}}</h2>
<slot :cities="item.cities"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: Object,
list: {
type: Array,
default: function() {
return []
}
}
}
}
</script>
The parent passes provinces to the child, which is passed in the son note. The child component receives props, the child passes item.cities to the parent, and the parent template receives it using slot-scope.