vue插槽实现
Vue 插槽的基本概念
插槽（Slot）是 Vue 组件化开发中的重要特性，允许父组件向子组件传递模板片段，实现内容分发。插槽的核心作用是增强组件的灵活性和复用性。
默认插槽
子组件通过 <slot> 标签定义插槽位置，父组件在子组件标签内插入内容时会替换插槽。
子组件定义：
<template>
<div>
<h3>子组件标题</h3>
<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>
<h1>标题内容</h1>
</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 v-slot:[dynamicSlotName]>
<p>动态插槽内容</p>
</template>
</ChildComponent>
</template>
<script>
export default {
data() {
return { dynamicSlotName: "header" };
}
};
</script>插槽的默认内容
子组件可以在 <slot> 内定义默认内容，当父组件未提供插槽内容时显示。
<template>
<slot>默认内容（父组件未传递时显示）</slot>
</template>注意事项
- 插槽内容在父组件作用域编译，但作用域插槽的数据来自子组件。
v-slot只能用于<template>或组件标签（Vue 2.6+）。- 默认插槽的
v-slot可简写为#default。
通过合理使用插槽，可以实现高度可定制的组件设计，满足复杂场景的需求。
