1.什么是插槽？

插槽（slot）是vue为组件的封装提供的能力。把不确定的部分定义为插槽。

插槽共分为3中：

插槽的结构：

匿名插槽：<slot></slot>

具名插槽：<slot name=top></slot>

作用域插槽:<slot title='标题' :num=count></slot>

1. 匿名插槽

匿名插槽的作用： 保留组件中的所有原始标签内容，这种插槽被称为匿名插槽

直接在组件中写上slot标签对，就可以在根元素中的引用的组件中间显示所写的内容。

当不写name的时候为匿名插槽（其实它会默认带上name=‘default’）

2. 具名插槽

凡是具有name属性的slot标签，就被称为具名插槽即<slot name=top>(在子组件中写，写的位置不同，在引用该模板的页面中显示的位置也会不一样)。

一个组件中有多个插槽的时候，如果没有设置 v-slot 属性值，会默认把元素插到没有设置 name 属性值的 slot 组件中，为了把对应的元素放到指定的位置，就需要借助 v-slot 和 name 属性，把内容对应起来。

<child-com>

 <template #header>

  头部

 </template>

 <template #body>

  内容

 </template>

 <template #footer>

  脚

 </template>

</child-com>

3. 作用域插槽

在组件的原始内容中，通过slot-scope属性接受作用域插槽传递的值，即obj={title：‘标题’，num：19}

作用域插槽:将组件模板中的数据传递给组件的原始内容

1. 在slot开始标签中，添加要传递的数据，避开name属性（具名插槽）

2. 在原始内容中通过slot-scope属性（其值是自定义的）接受传递的数据，即slot-scope=varName(本质是个对象，存储传递的数据，即数据会自动转换成键值对，存储在这个对象里，所以属性名对应属性名，属性值对应属性值）

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<child-com>  <template v-slot:header="slotProps">   插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }}  </template> </child-com> //子组件代码 <template>  <div v-for="(item, index) in arr" :key="index">   <slot :item="item" name="header" :index="index"></slot>  </div> </template> <script setup>  const arr = ['1111', '2222', '3333'] </script>