- Vue 3中的插槽（Slots）是一种强大的模式，用于创建可复用的组件，它允许你将模板插入到组件内部，同时保持组件的封装性和可重用性。在Vue 3中，插槽的使用变得更加灵活和强大。
基本插槽
- 默认插槽 :
在子组件中，使用<slot>标签定义一个插槽。父组件中的任何内容都将替换这个<slot>标签。
<!-- 子组件 -->
<template>
<div>
<slot></slot> <!-- 默认插槽 -->
</div>
</template>
<!-- 父组件 -->
<template>
<ChildComponent>
这里的内容会显示在子组件的插槽中。
</ChildComponent>
</template>
具名插槽
- 定义具名插槽 :
使用name属性在子组件中定义多个插槽。
<!-- 子组件 -->
<template>
<div>
<slot name="header"></slot> <!-- 具名插槽 -->
<slot></slot> <!-- 默认插槽 -->
<slot name="footer"></slot> <!-- 另一个具名插槽 -->
</div>
</template>
- 使用具名插槽 :
父组件使用v-slot指令指定要填充的插槽。
<!-- 父组件 -->
<template>
<ChildComponent>
<template v-slot:header>
这里是头部内容。
</template>
这里是默认插槽的内容。
<template v-slot:footer>
这里是底部内容。
</template>
</ChildComponent>
</template>
作用域插槽
- 定义作用域插槽 :
子组件可以通过作用域插槽向父组件传递数据。
<!-- 子组件 -->
<template>
<div>
<slot name="item" v-for="item in items" :item="item"></slot>
</div>
</template>
- 使用作用域插槽 :
父组件可以使用这些数据来定制插槽的内容。
<!-- 父组件 -->
<template>
<ChildComponent>
<template v-slot:item="slotProps">
<div>{
{ slotProps.item.name }}</div>
</template>
</ChildComponent>
</template>
插槽的默认内容
- 提供默认内容 :
在子组件的插槽中可以定义默认内容。如果父组件没有提供内容，将显示默认内容。
<!-- 子组件 -->
<template>
<div>
<slot>默认内容</slot>
</div>
</template>
注意事项
- 插槽内容是在父组件中编译的，而不是在子组件中。
- 作用域插槽可以让父组件访问子组件中的数据。
- 使用插槽时，遵循单向数据流的原则，避免直接修改子组件传递给父组件的数据。
插槽是Vue组件系统中一个非常强大的特性，它提供了一种灵活的方式来创建高度定制的组件，同时保持组件逻辑的封装和可重用性。
