文章目录
插槽
1. 插槽
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间，为用户预留的内容的占位符。
2. 体验插槽的基础用法
在封装组件时，可以通过<slot>元素定义插槽，从而为用户预留内容占位符。
<template>
<div>
<h3>Com 组件</h3>
<p>插槽开始</p>
<!-- 为组件的使用者预留的区域 -->
<slot></slot>
<p>插槽结束</p>
</div>
</template>
<script>
export default {
name: 'Com'
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<div>插槽的内容</div>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
2.1 没有预留插槽组件标签内的内容会被丢弃
如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。
<template>
<div>
<h3>Com 组件</h3>
<p>插槽开始</p>
<!-- 为组件的使用者预留的区域 -->
<!-- <slot></slot> -->
<p>插槽结束</p>
</div>
</template>
<script>
export default {
name: 'Com'
}
</script>
<style>
</style>
2.2 后备内容
封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。
<template>
<div>
<h3>Com 组件</h3>
<p>插槽开始</p>
<!-- 为组件的使用者预留的区域 -->
<slot>
<div>插槽的后备内容</div>
</slot>
<p>插槽结束</p>
</div>
</template>
<script>
export default {
name: 'Com'
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- <div>插槽的内容</div> -->
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
3. 具名插槽
如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot>插槽指定具体的 name 名称。
这种带有具体名称的插槽叫做“具名插槽”。
注意：没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。
<template>
<div>
<h3>Com 组件</h3>
<p>----------插槽开始----------</p>
<!-- 为组件的使用者预留的区域 -->
<slot name="header"></slot>
<slot></slot>
<!-- <slot name="default"></slot> -->
<slot name="bottom"></slot>
<p>----------插槽结束----------</p>
</div>
</template>
<script>
export default {
name: 'Com'
}
</script>
<style>
</style>
3.1 为具名插槽提供内容
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- <div>插槽的内容</div> -->
<template v-slot:header>
<div>头部区域</div>
</template>
<template v-slot:default>
<div>默认区域</div>
</template>
<template v-slot:bottom>
<div>bottom区域</div>
</template>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
3.2 具名插槽的简写形式
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- <div>插槽的内容</div> -->
<!-- <template v-slot:header> -->
<template #header>
<div>头部区域</div>
</template>
<!-- <template v-slot:default> -->
<template #default>
<div>默认区域</div>
</template>
<!-- <template v-slot:bottom> -->
<template #bottom>
<div>bottom区域</div>
</template>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
4. 作用域插槽
在封装组件的过程中，可以为预留的<slot> 插槽绑定 props 数据，这种带有 props 数据的<slot> 叫做“作用域插槽”。
作用域插槽，要显示的数据已经在组件中，以什么样的样式显示数据(用什么标签和标签的样式)，可以由组件的使用者进行指定。
<template>
<div>
<h3>Com 组件</h3>
<p>----------插槽开始----------</p>
<!-- 为组件的使用者预留的区域 -->
<!-- :infomation="info" 未来要进行渲染在插槽位置的数据 -->
<slot :infomation="info"></slot>
<p>----------插槽结束----------</p>
</div>
</template>
<script>
export default {
name: 'Com',
data() {
return {
info: {
name: 'zs',
age: 23
},
msg: 'hello vue'
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- val 接收组件中要在插槽位置渲染的数据 -->
<template #default="val">
{
{ val }}
</template>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
4.1 解构作用域插槽的 Prop
作用域插槽对外提供的数据对象，可以使用解构赋值简化数据的接收过程。
<template>
<div>
<h3>Com 组件</h3>
<p>----------插槽开始----------</p>
<!-- 为组件的使用者预留的区域 -->
<!-- :infomation="info" 未来要进行渲染在插槽位置的数据 -->
<slot :infomation="info" :message="msg"></slot>
<p>----------插槽结束----------</p>
</div>
</template>
<script>
export default {
name: 'Com',
data() {
return {
info: {
name: 'zs',
age: 23
},
msg: 'hello vue'
}
}
}
</script>
<style>
</style>
把information的数据解构出来
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- val 接收组件中要在插槽位置渲染的数据 -->
<template #default="{ infomation }">
<div>{
{ infomation.name }}</div>
<div>{
{ infomation.age }}</div>
</template>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
4.2 声明作用域插槽
在封装 Com 组件的过程中，可以通过作用域插槽把表格每一行的数据传递给组件的使用者。
<template>
<div>
<h3>Com 组件</h3>
<tbody>
<tr v-for="item in arr" :key="item.id">
<!-- 作用域插槽 -->
<slot :arr_i="item"></slot>
</tr>
</tbody>
</div>
</template>
<script>
export default {
name: 'Com',
data() {
return {
arr: [
{
id: 1, data: 'a'},
{
id: 2, data: 'b'},
{
id: 3, data: 'c'},
{
id: 4, data: 'd'},
{
id: 5, data: 'e'},
]
}
}
}
</script>
<style>
</style>
4.3 使用作用域插槽
在使用 Com 组件时，自定义单元格的渲染方式，并接收作用域插槽对外提供的数据。
<template>
<div>
<h1>App 组件</h1>
<hr>
<Com>
<!-- 向子组件的插槽区域放入元素，写在组件标签内 -->
<!-- 接收组件中要在插槽位置渲染的数据 -->
<template #default="{arr_i}">
<!-- 使用作用域插槽的数据 -->
<td>{
{ arr_i.id }}</td>
<td>{
{ arr_i.data }}</td>
</template>
</Com>
</div>
</template>
<script>
import Com from './Com.vue'
export default {
name: 'App',
components: {
Com
}
}
</script>
