作用：让组件内部的一些 结构 支持 自定义

需求:：将需要多次显示的对话框, 封装成一个组件

_{问题：组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办？}

语法：
1.组件内需要的结构部分，改用<slot></slot>占位
2.使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot

后备内容

通过插槽可以传内容的定制，传什么显示什么，不传的话，则空白
那我们就需要给他设置默认内容

后备内容语法：

在<slot>标签内，添加内容，作为默认内容

<slot>我是默认内容</slot>

• 在外部使用组件时，不传内容，则显示slot的默认内容

<MyDialog></MyDialog>

• 在外部组件，传东西时，则solt整体被替换

<MyDialog>传入替换内容</MyDialog>

具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制

具名插槽语法：

1、多个slot使用name属性区分名字

<div class="dialog-header">
  <slot name="head"></slot>
</div>
<div class="dialog-content">
  <slot name="content"></slot>
</div>
<div class="dialog-footer">
  <slot name="footer"></slot>
</div>

2、template配合v-slot:名字 来区分对应标签

<MyDialog>
  <template v-slot:head>
    大标题
  </template>
  <template v-slot:content>
    内容文本
  </template>
  <template v-slot:footer>
    <button>按钮</button>
  </template>
</MyDialog>

简化写法：

v-slot:插槽名 可以简化成 #插槽名

<MyDialog>
  <template #head>
    大标题
  </template>

</MyDialog>

作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。

场景：封装表格组件

1. 父传子，动态渲染表格内容

2. 利用默认插槽，定制操作列

3. 删除或查看都需要用到 当前项的 id，属于 组件内部的数据

通过 作用域插槽 传值绑定，进而使用

基本使用步骤：

1、给 slot 标签, 以 添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

2、所有添加的属性, 都会被收集到一个对象中

{ id: 3, msg: '测试文本' }

3、在template中, 通过 ` #插槽名= "obj" ` 接收，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>