Vue2插槽

插槽

• 默认插槽
• 具名插槽
• 作用域插槽

1. 默认插槽

作用：让组件内的结构或者内容可以支持自定义

**语法：在组件内使用**占位，使用组件时在标签内部传入结构替换slot

通过插槽完成了内容的定制，传什么显示什么, 但是如果不传，则是空白，也能给插槽设置默认显示内容，如果没传就显示默认内容，传了就显示传递的内容

**语法：**直接在 标签内，放置内容, 就是默认显示内容

2. 具名插槽

具名插槽顾名思义就是有名字的插槽

一个组件内有如果多处结构，需要外部传入标签，这是默认插槽就只能定制一个位置，所有的默认插槽都会显示同样的内容，使用具名插槽就可以解决这一问题

语法：

• <slot name="名字"></slot>，用name区分不同插槽的名字
• 使用的使用<template></template>配合v-slot:名字（v-slot:简写：#名字）来使用

3. 作用域插槽

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

eg：

​ 在组件内插槽中的数据要删除数据，可以将id传过来

用法：

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

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

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

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

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

   <MyTable :list="list">
       <!-- 支持解构赋值
   		 #default="{id}"
   	-->
     <template #default="obj">
       <button @click="del(obj.id)">删除</button>
     </template>
   </MyTable>