Vue演练场基础知识（七）插槽
为学习Vue基础知识，我动手操作通关了Vue演练场，该演练场教程的目标是快速体验使用 Vue 是什么感受，设置偏好时我选的是选项式 + 单文件组件。以下是我结合深入指南写的总结笔记，希望对Vue初学者有所帮助。
文章目录
- 十五. 插槽
-
- 插槽内容与出口
- 渲染作用域
- 默认内容
- 具名插槽
- 条件插槽
- 动态插槽名
- 作用域插槽
- 具名作用域插槽
- 高级列表组件示例
- 无渲染组件
十五. 插槽
插槽内容与出口
父组件可以用props向子组件传递js表达式，emits向子组件传递事件，那能不能直接向子组件传递定义好的模板内容呢？
这就是插槽的作用。
<div class="dialog">
<slot />
div>
<Dialog>
<div>对话框内容div>
Dialog>
最终渲染出的 DOM 是这样：
<div class="dialog">
<div>对话框内容div>
div>
渲染作用域
由于插槽内容是在父组件里定义的，所以它能访问到父组件的数据作用域，不能访问子组件的。
<script>
export default {
data() {
return {msg: '来自子组件的内容'};
}
}
script>
<template>
<div class="dialog">
<slot />
div>
template>
<script>
import Dialog from './Dialog.vue';
export default {
components: {Dialog},
data() {
return {msg: '来自父组件的内容'};
}
}
script>
<template>
<Dialog>
<div>{{msg}}div>
Dialog>
template>
最终渲染出的 DOM 是这样：
<div class="dialog">
<div>来自父组件的内容div>
div>
默认内容
<div class="dialog">
<slot>默认内容slot>
div>
<Dialog>
<div>对话框内容div>
Dialog>
<Dialog />
最终渲染出的 DOM 是这样：
<div class="dialog">
<div>对话框内容div>
div>
<div class="dialog">
默认内容
div>
具名插槽
有时候我们希望子组件能接收多个插槽内容，比如希望一个对话框组件支持分别接收头部内容、主体内容、底部内容。对于这种场景， 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID。
这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的
<div class="dialog">
<header class="card-header">
<slot name="header" />
header>
<main class="card-main">
<slot>slot>
main>
<footer class="card-footer">
<slot name="footer">默认底部slot>
footer>
div>
与之，或简写为：
<Dialog>
<template #header>
<div>我的标题div>
template>
<template #default>
<p>我的内容1p>
<p>我的内容2p>
template>
<template #footer>
<button>取消button>
<button>确定button>
template>
Dialog>
当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 节点都被隐式地视为默认插槽的内容。所以也可以省略掉，把其中内容直接作子组件的直接子元素，但不能混用，即子组件的直接子元素中不能同时出现和非 节点。
<Dialog>
<template #header>
<div>我的标题div>
template>
<p>我的内容1p>
<p>我的内容2p>
<template #footer>
<button>取消button>
<button>确定button>
template>
Dialog>
最终渲染出的 HTML 如下：
<div class="dialog">
<header class="card-header">
<div>我的标题div>
header>
<main class="card-main">
<p>我的内容1p>
<p>我的内容2p>
main>
<footer class="card-footer">
<button>取消button>
<button>确定button>
footer>
div>
推荐在使用具名插槽的时候，为默认插槽使用显式的 标签，不容易混淆，更加可读。
条件插槽
在上面的例子中，我们为对话框组件的 header、footer 或 default 等插槽设置了margin等样式：
<header class="card-header">
<slot name="header" />
header>
但如果用户希望创建一个没有头部的对话框，于是不传header插槽内容（且没有默认插槽内容），那就会出现对话框顶部渲染出一个空的
<header class="card-header">header>
那么有没有办法在根据header插槽存在与否来决定要不要渲染
可以结合 $slots 属性与 v-if 来实现：
<header class="card-header" v-if="$slot.header">
<slot name="header" />
header>
其中的$slots表示父组件传入插槽的对象。
通常用于手写渲染函数，但也可用于检测是否存在插槽。
每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default。
// this.$slots等于
{
default: () => <div>...</div>,
header: () => <div>...</div>,
footer: () => <div>...</div>,
}
动态插槽名
插槽名不仅可以设置为常量，还可以设置为变量，如以下设置插槽名为变量mySlotName：
<div class="dialog">
<slot :name="mySlotName">默认底部slot>
div>
<Dialog>
<template #[mySlotName]>
<button>取消button>
<button>确定button>
template>
Dialog>
作用域插槽
上文中提到，插槽是在父组件中被定义的，所以无法读取到子组件的状态。那假如插槽需要拿到子组件状态该怎么办呢？
可以像对组件传递 props 那样，向插槽出口
<div class="dialog">
<slot msg="来自子组件的内容" />
div>
<Dialog v-slot="slotProps">
<div>{{slotProps.msg}}div>
Dialog>
// 或
<Dialog v-slot="{msg}">
<div>{{msg}}div>
Dialog>
最终渲染出的 DOM 是这样：
<div class="dialog">
<div>来自子组件的内容div>
div>
具名作用域插槽
作用域插槽也可以与具名插槽混用，如下面的v-slot:header="slotProps1"（也可写作#header="slotProps1）：
<div class="dialog">
<header>
<slot name="header" msg="来自子组件的内容1" />
header>
<main>
<slot msg="来自子组件的内容2"/>
main>
div>
<Dialog>
<template #header="slotProps1">
<div>来自父组件的内容div>
<div>{{slotProps1.msg}}div>
template>
<template #default="{msg}">
<div>{{msg}}div>
template>
Dialog>
最终渲染出的 DOM 是这样：
<div class="dialog">
<header>
<div>来自父组件的内容div>
<div>来自子组件的内容1div>
header>
<main>
<div>来自子组件的内容2div>
main>
div>
再次推荐为默认插槽使用显式的 标签，不容易出错。
不允许像下面这样
同时在子组件上和template上定义v-slot，否则会编译报错。
<Dialog v-slot="slotProps2">
<template v-slot:header="slotProps1">
<div>来自父组件的内容div>
<div>{{slotProps1.msg}}div>
template>
<div>{{slotProps2.msg}}div>
Dialog>
高级列表组件示例
通过对具名作用域插槽的运用，我们可以实现一个高级列表组件，封装了可重用的逻辑 (如数据获取、分页、无限滚动等) 和视图输出，并将部分视图输出（如列表项的内容和样式、每页条目数）通过作用域插槽交给了消费者组件来管理。
<ul>
<li v-for="item in list" key="item.id">
<slot name="itemSlot" v-bind="item">
{{item}}
slot>
li>
每页{{pageNum}}个
ul>
<FuncyList :page-num="10" >
<template #itemSlot="{id, title}">
<div>{{id}}-{{title}}div>
template>
FuncyList>
无渲染组件
一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。我们将这种类型的组件称为无渲染组件。
<script>
export default {
data() {
return {pi: '3.1415926535'};
},
computed: {
doublePi: () => this.pi *2;
}
}
script>
<template>
<slot :text="doublePi" />
temlate>
<NoRenderComponent >
<template v-slot="{text}">
<div class="uiClass">{{text}}div>
template>
NoRenderComponent>