Vue 插槽(Slot)用法详解

插槽(Slot)是Vue中一种强大的内容分发机制，它允许你在组件中定义可替换的内容区域，为组件提供了更高的灵活性和可复用性。本文将全面介绍Vue插槽的各种用法。

1. 基本插槽

基本插槽是最简单的插槽形式，它允许父组件向子组件插入内容。

子组件定义插槽:

<!-- ChildComponent.vue -->
<template><div class="child"><h2>子组件标题</h2><slot></slot>  <!-- 插槽位置 --><p>子组件底部内容</p></div>
</template>

父组件使用:

<template><ChildComponent><p>这是插入到子组件中的内容</p></ChildComponent>
</template>

2. 后备内容(默认内容)

插槽可以设置默认内容，当父组件没有提供内容时显示。

<!-- ChildComponent.vue -->
<template><button type="submit"><slot>提交</slot>  <!-- 默认显示"提交" --></button>
</template>

3. 具名插槽

当一个组件需要多个插槽时，可以使用具名插槽。

子组件定义:

<!-- BaseLayout.vue -->
<template><div class="container"><header><slot name="header"></slot></header><main><slot></slot>  <!-- 默认插槽，没有name属性 --></main><footer><slot name="footer"></slot></footer></div>
</template>

父组件使用:

<template><BaseLayout><template v-slot:header><h1>这里是页眉</h1></template><p>这里是主内容，会放入默认插槽</p><template v-slot:footer><p>这里是页脚</p></template></BaseLayout>
</template>

4. 作用域插槽

作用域插槽允许子组件向插槽传递数据，父组件可以决定如何渲染这些数据。

子组件定义:

<!-- TodoList.vue -->
<template><ul><li v-for="(item, index) in items" :key="index"><slot :item="item" :index="index"></slot></li></ul>
</template><script>
export default {data() {return {items: ['吃饭', '睡觉', '写代码']}}
}
</script>

父组件使用:

<template><TodoList><template v-slot:default="slotProps"><span v-if="slotProps.index % 2 === 0">✓</span>{{ slotProps.item }}</template></TodoList>
</template>

5. 解构插槽Prop

在作用域插槽中，可以使用ES6解构语法简化代码：

<template><TodoList><template v-slot:default="{ item, index }"><span v-if="index % 2 === 0">✓</span>{{ item }}</template></TodoList>
</template>

6. 动态插槽名

插槽名可以是动态的：

<template><base-layout><template v-slot:[dynamicSlotName]>...</template></base-layout>
</template><script>
export default {data() {return {dynamicSlotName: 'header'}}
}
</script>

7. 缩写语法

Vue提供了插槽的缩写语法：

v-slot:header 可以简写为 #header
默认插槽 v-slot:default 可以简写为 v-slot 或 #default

<template><BaseLayout><template #header><h1>页眉</h1></template><template #default><p>主内容</p></template><template #footer><p>页脚</p></template></BaseLayout>
</template>

8. 高级用法：插槽函数

插槽可以像函数一样使用，实现更灵活的内容分发：

子组件:

<template><div><slot :user="user" :isLoggedIn="isLoggedIn"></slot></div>
</template><script>
export default {data() {return {user: { name: '张三', age: 30 },isLoggedIn: true}}
}
</script>

父组件:

<template><UserComponent><template v-slot="{ user, isLoggedIn }"><div v-if="isLoggedIn">欢迎, {{ user.name }}! 您已经{{ user.age }}岁了。</div><div v-else>请登录</div></template></UserComponent>
</template>