Vue中的插槽

插槽-默认插槽

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

插槽的基本语法

组件内需要定制的结构部分，改用<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>