Vue-2.8插槽

插槽分为默认插槽（组件内定制一处结构）、具名插槽（组件内定制多处结构）

作用域插槽不属于以上，只是插槽的一个传参语法

默认插槽

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

需求：要在页面中显示一个对话框，封装成一个组件

问题：组件的内容部分，不希望写死，希望能使用的时候自定义。

插槽基本语法：

1.组件内需要定制的结构部分，改用占位

2.使用组件时，标签内部，传入结构替换slot

后备内容（默认值）

通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白

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

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

效果：外部使用组件时，不传东西，则slot会显示后备内容；传东西，则后备内容被替代。

具名插槽

一旦插槽起了名字，就是具名插槽，只支持定向分发

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

语法：

 3.v-slot:插槽名可以简化为#插槽名

作用域插槽

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

场景：封装表格组件

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

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

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

基本使用步骤：

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

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

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

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

3.在template中，通过`#插槽名="obj"`接收，默认插槽名为default，obj值为上方对象

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