vue插槽实现
Vue 插槽的基本概念
插槽（Slot）是 Vue 组件化开发中的重要特性，允许父组件向子组件传递模板片段，实现内容分发。插槽分为默认插槽、具名插槽和作用域插槽三种类型。
默认插槽
子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换该标签。
子组件示例：
<template>
<div>
<h2>子组件标题</h2>
<slot></slot> <!-- 默认插槽 -->
</div>
</template>父组件使用：
<template>
<ChildComponent>
<p>这是插入到子组件的内容</p>
</ChildComponent>
</template>具名插槽
通过 name 属性为插槽命名，实现多内容分发。
子组件示例：
<template>
<div>
<slot name="header"></slot>
<slot name="body"></slot>
</div>
</template>父组件使用：
使用 v-slot 指令或 # 缩写指定插槽名：
<template>
<ChildComponent>
<template v-slot:header>
<h3>头部内容</h3>
</template>
<template #body>
<p>主体内容</p>
</template>
</ChildComponent>
</template>作用域插槽
子组件通过插槽向父组件传递数据，父组件可基于数据自定义渲染逻辑。
子组件示例：
<template>
<div>
<slot :item="itemData"></slot>
</div>
</template>
<script>
export default {
data() {
return { itemData: { text: '子组件数据' } };
}
};
</script>父组件使用：
通过 v-slot 接收子组件传递的数据：
<template>
<ChildComponent>
<template v-slot="slotProps">
<p>{{ slotProps.item.text }}</p>
</template>
</ChildComponent>
</template>动态插槽名
通过动态指令绑定插槽名，实现灵活分发。
父组件示例：
<template>
<ChildComponent>
<template #[dynamicSlotName]>
<p>动态插槽内容</p>
</template>
</ChildComponent>
</template>
<script>
export default {
data() {
return { dynamicSlotName: 'customSlot' };
}
};
</script>插槽的默认内容
子组件可在 <slot> 内部定义默认内容，当父组件未传递内容时显示。
子组件示例：
<template>
<slot>
<p>默认内容（父组件未传递时显示）</p>
</slot>
</template>注意事项
- 插槽内容在父组件作用域编译，无法直接访问子组件数据（作用域插槽除外）。
v-slot可简写为#，但需注意具名插槽和作用域插槽的语法差异。- Vue 3 中废弃了
slot和slot-scope属性，统一使用v-slot。
