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