vue---插槽

1.默认插槽

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

应用场景：在页面中显示一个对话框，封装成一个组件，但是组件内容部分不写死

基本语法：①组件内需要定制的结构部分，改用<slot></slot>

②使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot

插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）

语法：在<slot>标签内，放置内容，作为默认显示内容

<slot>我是后备内容</slot>

2.具名插槽

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

语法：①多个slot使用name属性区分名字

②template配合v-slot:名字 来分发对应标签  v-slot:名字可以简写成 #名字

v-slot需要写在template标签中

3.作用域插槽

作用域插槽是插槽的一个传参语法

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

应用场景：封装表格组件

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

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

③删除或查看都需要用到当前项的id，属于组件内部的数据通过作用域插槽传值绑定，进而使用

基本步骤：

①给slot标签，以添加属性的方式传值

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

②所有添加的属性，都会被收集到一个对象中

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

③在template中，通过#插槽名=“obj”接收，默认插槽名为default