插槽-默认插槽

作用：让组件内部的一些结构支持自定义
需求：要在页面中显示一个对话框，封装成一个组件，但是组件的内容部分，不是写死的，希望能使用时自定义。

插槽的基本语法

• 组件内需要定制的结构部分，改用<slot></slot>占位
• 使用组件时，在组件中传入结构替换slot，例如<组件名>xxxxxx</组件名>
  

这样就实现了自定义内容。

插槽默认内容

插槽后备内容：封装组件时，可以为预留的<slot> 插槽提供后备内容（默认内容）
语法：在<slot></slot>标签内，放置内容，作为默认显示内容，当外部调用给组件时，若是没有指定内容，那么就会显示默认的内容
例如：

插槽-具名插槽

场景：组件内有多处不确定的结构
语法：

• 多个slot使用name属性区分名字
• 在父组件中通过template配合v-slot:名字 或者 #名字 来分发对应标签
  

插槽-作用域插槽

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

场景：封装表格组件

• 1.父传子，动态渲染表格内容
• 2.利用默认插槽，定制操作列
• 3.删除或者查看都需要用到当前项的id，属于组件内部的数据，通过作用域插槽传值绑定。

例如：

在上图中，表格是一个组件，里面的数据都是不同的，同时对应的操作也是不同的。

通过上例案例，引出插槽的使用步骤：

• 给slot标签，以添加属性的方式传值
  <slot :id="item.id" msg='测试'></slot>
• 所有添加的属性，都会被收集到一个对象中
  {id: 3, msg:'测试'}
• 在template中，通过#插槽名="obj"接收，默认插槽名为default

<!-- 给组件传值 list-->
<MyTable :List='list'>
    <!-- 默认插槽的名称是default，如果是带有名称的插槽则 #插槽名，其中object是组件传递过来的值-->
    <template #default="object">
        <button @click='del(object.id)'>删除</button>
    </template>
</MyTable>

代码示例：

注意:在 <slot:id = "item.id"></slot>中，这里传递的数据是一个对象：例如传递了一条
{id:1,name:'zzz'}这样的数据

效果展示：

可以看到，同一个组件显示了不同的数据，同时对应的的操作也不同，这就是作用域插槽提供数据回传实现的操作
本质上来说，还是插槽的基本使用，在基本使用的基础上添加了传值的功能