Vue3插槽v-slot使用方式

在 Vue 3 中，v-slot 是用来定义和使用插槽的指令。插槽是 Vue 的一个功能，允许你在组件内部定义占位内容，便于在父组件中提供动态内容。以下是 v-slot 的详细使用方法：

---

1. 基础使用

<template><BaseComponent><template v-slot:default><p>这是默认插槽的内容</p></template></BaseComponent>
</template>

等价于：

<template><BaseComponent><p>这是默认插槽的内容</p></BaseComponent>
</template>

2. 具名插槽

具名插槽用于提供多个插槽，每个插槽有一个名字。

父组件：

<template><BaseComponent><template v-slot:header><h1>标题部分</h1></template><template v-slot:footer><p>底部内容</p></template></BaseComponent>
</template>

子组件：

<template><div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

3. 简写语法

v-slot 提供了一种简写形式，用 # 替代 v-slot。

<BaseComponent><template #header><h1>标题部分</h1></template><template #footer><p>底部内容</p></template>
</BaseComponent>

4. 作用域插槽

作用域插槽用于从子组件向父组件传递数据。

子组件：

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

父组件：

<template><BaseComponent><template v-slot:default="slotProps"><p>用户名: {{ slotProps.user.name }}</p><p>年龄: {{ slotProps.user.age }}</p></template></BaseComponent>
</template>

简写形式：

<BaseComponent><template #default="{ user }"><p>用户名: {{ user.name }}</p><p>年龄: {{ user.age }}</p></template>
</BaseComponent>

5. 默认插槽的作用域

默认插槽也可以带作用域属性。

<BaseComponent><template #default="{ message }"><p>信息: {{ message }}</p></template>
</BaseComponent>

---

小结

• v-slot 用于插槽定义，支持默认插槽、具名插槽和作用域插槽。
• 使用 # 作为简写方式，能让代码更加简洁。
• 作用域插槽 是一种强大的功能，可以让父组件使用子组件提供的数据。