1. 什么是插槽
插槽(Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定、希望由用户指定的部分定义为插槽。
2. 插槽的使用
2.1 插槽的简单使用
定义插槽区域的语法
<slot></slot>
78.png
2.2 slot的name属性
- vue 官方规定，每一个slot插槽，都要有一个name名称
- 如果不指定，name的默认值是defalut
- 默认情况下，在使用组件的时候，提供的内容都会被填充到名字 为default的插槽中
79.png
2.3 v-slot的用法(指定要填充的插槽名)
可以在使用相关 组件的时候，根据插槽的name指定要填充的插槽位置
v-slot这个指令只能用在components和<template>中，不能直接用在元素标签上。
-
语法
v-slot:插槽名
81.png
实现效果
82.png
- <template>是一个虚拟的标签，只是起到一个包裹的作用，不会被渲染为一个具体的元素，在页面中看不到真实的元素
83.png
2.4 v-slot的简写(#插槽名)
语法
#插槽名
84.png
2.5 后备内容（默认插槽 name为default）
封装组件时，可以为预留的<slot>插槽提供后备的内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。
2.6 具名插槽
具名插槽就是插槽有自己的名字,带名字的插槽叫做具名插槽
85.png
2.7 作用域插槽（既带数据，又带名字的插槽）
- 可以接受到插槽上定义的数据
- 如果插槽上没有定义数据，则接受到的是一个空对象
怎么接收插槽的数据 语法
v-slot:插槽名="变量名"
or
#插槽名="变量名"
可以使用这个变量名就可以获取 插槽上 定义的数据，变量名可以随义定义，只要js标识符的命名规则。
示例代码如下：
86.png
实现效果如下：
87.png
2.8 作用域插槽的解构赋值
在为插槽指定数据的时候可以定义一个字符串，也可以为动态绑定值，
-
示例如下：
<!-- 指定一个字符串的值 ，给slot插槽定义一个变量名为 msg,值为 hello wjy--> <slot msg="hello wjy"></slot> <!-- 动态绑定一个变量userInfo的值,给slot插槽定义了一个变量名 user,值为userInfo的值 --> <slot :user="userInfo"></slot>
88.png
实现效果
89.png
3.总结
插槽.png
