vue插槽实现
Vue 插槽的基本概念
插槽（Slot）是 Vue 组件化开发中的核心功能之一，允许父组件向子组件传递模板片段，实现内容分发。插槽为组件提供了更高的灵活性和复用性。
默认插槽
默认插槽是最基础的插槽形式，子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换子组件中的 <slot> 标签。
子组件定义：
<template>
<div class="child-component">
<slot></slot>
</div>
</template>父组件使用：
<template>
<ChildComponent>
<p>这段内容会替换子组件的 slot 标签</p>
</ChildComponent>
</template>具名插槽
具名插槽允许定义多个插槽，并通过名称区分。子组件通过 <slot name="xxx"> 指定插槽名称，父组件通过 <template v-slot:xxx> 或简写 #xxx 传递内容。
子组件定义：
<template>
<div class="child-component">
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</template>父组件使用：
<template>
<ChildComponent>
<template v-slot:header>
<h1>这是头部内容</h1>
</template>
<template #content>
<p>这是主体内容</p>
</template>
<template #footer>
<p>这是底部内容</p>
</template>
</ChildComponent>
</template>作用域插槽
作用域插槽允许子组件向插槽传递数据，父组件可以访问这些数据并自定义渲染逻辑。子组件通过 <slot :data="data"> 传递数据，父组件通过 v-slot="slotProps" 接收。
子组件定义：
<template>
<div class="child-component">
<slot :item="item" :index="index"></slot>
</div>
</template>
<script>
export default {
data() {
return {
item: { name: '示例数据' },
index: 0
}
}
}
</script>父组件使用：
<template>
<ChildComponent>
<template v-slot="{ item, index }">
<p>索引: {{ index }}, 数据: {{ item.name }}</p>
</template>
</ChildComponent>
</template>动态插槽名
动态插槽名允许通过变量动态指定插槽名称，适用于需要根据条件切换插槽的场景。
父组件使用：
<template>
<ChildComponent>
<template v-slot:[dynamicSlotName]>
<p>动态插槽内容</p>
</template>
</ChildComponent>
</template>
<script>
export default {
data() {
return {
dynamicSlotName: 'header'
}
}
}
</script>插槽的默认内容
子组件可以在 <slot> 标签内定义默认内容，当父组件未提供插槽内容时显示。
子组件定义：
<template>
<div class="child-component">
<slot>
<p>这是默认内容</p>
</slot>
</div>
</template>注意事项
- 插槽内容是在父组件作用域中编译的，因此只能访问父组件的数据和方法。
- 作用域插槽的数据传递是单向的，父组件无法直接修改子组件传递的数据。
- 在 Vue 3 中，
v-slot可以简写为#，例如#header等同于v-slot:header。 - 避免在插槽中使用复杂的逻辑，保持插槽的简洁性和可维护性。
