vue slot实现
vue slot 的实现方法
在 Vue 中，slot 是一种内容分发机制，允许父组件向子组件传递模板内容。以下是几种常见的 slot 实现方式：
默认 slot
默认 slot 是最基础的 slot 使用方式，父组件可以在子组件标签内插入任意内容，这些内容会替换子组件中的 <slot> 标签。
子组件代码：
<template>
<div>
<h2>子组件标题</h2>
<slot></slot>
</div>
</template>父组件代码：
<template>
<child-component>
<p>这是插入到子组件中的内容</p>
</child-component>
</template>具名 slot
具名 slot 允许父组件将内容插入到子组件的特定位置，通过 name 属性来标识不同的 slot。
子组件代码：
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>父组件代码：
<template>
<child-component>
<template v-slot:header>
<h1>自定义头部</h1>
</template>
<p>默认 slot 内容</p>
<template v-slot:footer>
<p>自定义底部</p>
</template>
</child-component>
</template>作用域 slot
作用域 slot 允许子组件将数据传递给父组件，父组件可以使用这些数据来渲染内容。
子组件代码：
<template>
<div>
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '张三',
age: 25
}
}
}
}
</script>父组件代码：
<template>
<child-component>
<template v-slot:default="slotProps">
<p>用户名: {{ slotProps.user.name }}</p>
<p>年龄: {{ slotProps.user.age }}</p>
</template>
</child-component>
</template>动态 slot 名
动态 slot 名允许通过变量动态指定 slot 名称，增加灵活性。
父组件代码：
<template>
<child-component>
<template v-slot:[dynamicSlotName]>
<p>动态 slot 内容</p>
</template>
</child-component>
</template>
<script>
export default {
data() {
return {
dynamicSlotName: 'header'
}
}
}
</script>slot 缩写语法
Vue 提供了 v-slot 的缩写语法，可以用 # 代替 v-slot:。
父组件代码：
<template>
<child-component>
<template #header>
<h1>缩写语法头部</h1>
</template>
</child-component>
</template>以上方法涵盖了 Vue slot 的主要使用场景，可以根据实际需求选择合适的方式来实现内容分发。
