首页　>　文章列表　>　Vue中如何使用v-slot默认插槽

Vue中如何使用v-slot默认插槽

vue 插槽 v-slot
494 2023-06-12

Vue 是一款流行的前端框架，它提供了众多的指令帮助我们更好的进行开发。其中，v-slot 是一个非常重要的指令，它可以让我们更加灵活地组合组件，提升代码的可读性和复用性。

默认插槽是 v-slot 中的一种插槽类型，使用默认插槽可以将父组件中的 HTML 结构传递到子组件中，让子组件可以将其作为自己的子元素渲染。本文将向大家详细介绍 Vue 中如何使用 v-slot 默认插槽。

默认插槽的语法

首先，我们来看一下默认插槽的基本语法：

<template>
  <div>
    <slot></slot>
  </div>
</template>

上面的代码定义了一个简单的组件，它包含一个默认插槽。当我们在使用这个组件时，可以将任意 HTML 结构放在组件标签内部，这些 HTML 结构将被传递到组件内部的 <slot></slot> 标签中，并按顺序渲染出来。

<my-component>
  <p>Hello, world!</p>
</my-component>

上面的代码在 <my-component> 标签内部添加了一个 <p> 标签，这个 <p> 标签将被传递到组件内部的 <slot></slot> 标签中，并渲染出来。

命名插槽

当我们在组件中使用多个插槽时，如果都使用默认插槽，那么这些插槽将会按顺序被渲染出来，这种情况可能会让我们的代码变得混乱。为了避免这种情况，我们可以使用命名插槽。

命名插槽和默认插槽的区别就在于，在使用命名插槽时，我们需要给插槽起一个名字，并在传递 HTML 结构时指定这个名字。下面是一个使用命名插槽的组件示例：

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

上面的代码定义了三个插槽，其中 name="header" 和 name="footer" 为命名插槽，而无 name 属性的 <slot></slot> 标签为默认插槽。当我们在使用这个组件时，可以使用 v-slot 指令来指定某个插槽的内容，并向这个插槽传递 HTML 结构。

<my-component>
  <template v-slot:header>
    <h1>This is the header</h1>
  </template>
  <p>Hello, world!</p>
  <template v-slot:footer>
    <footer>Footer</footer>
  </template>
</my-component>

上面的代码使用 v-slot 指令指定了三个插槽的内容，可以看到，使用命名插槽可以大大提升组件的可读性和可维护性。

简写语法

为了进一步简化代码，Vue 2.6.0 推出了一种简写语法：

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

<my-component>
  <template #header>
    <h1>This is the header</h1>
  </template>
  <p>Hello, world!</p>
  <template #footer>
    <footer>Footer</footer>
  </template>
</my-component>

可以看到，我们可以使用 # 来代替 v-slot:，将 v-slot:name 简写成 #name，这样可以更加方便地书写代码。