Vue 插槽：构建灵活组件的利器

插槽的基本使用

插槽的基本使用非常简单，只需要在组件模板中使用 <slot> 标签即可。<slot> 标签的作用是定义一个占位符，然后通过父组件传递内容到这个占位符中。例如，以下代码定义了一个简单的组件，其中包含一个 <slot> 标签：

<template>
  <div>
    <h1>组件标题</h1>
    <slot></slot>
  </div>
</template>

当使用这个组件时，父组件可以通过 v-slot 指令将内容传递到 <slot> 标签中。例如，以下代码使用这个组件并传递了内容：

<template>
  <div>
    <MyComponent>
      <p>这是父组件传递的内容</p>
    </MyComponent>
  </div>
</template>

当这个组件被渲染时，<slot> 标签会被父组件传递的内容替换，最终的 HTML 代码如下：

<div>
  <h1>组件标题</h1>
  <p>这是父组件传递的内容</p>
</div>

插槽的默认值

有时候，我们可能希望插槽有一个默认值，这样当父组件没有传递内容时，插槽也会显示一些内容。在 Vue 中，我们可以通过在 <slot> 标签中使用 v-if 指令来设置默认值。例如，以下代码为 <slot> 标签设置了默认值：

<template>
  <div>
    <h1>组件标题</h1>
    <slot v-if="!hasContent">
      <p>这是插槽的默认值</p>
    </slot>
  </div>
</template>

当这个组件被渲染时，如果父组件没有传递内容，<slot> 标签将显示默认值。

具名插槽

除了基本插槽之外，Vue 还支持具名插槽。具名插槽允许我们为不同的内容定义不同的插槽，然后通过父组件传递不同的内容到这些插槽中。例如，以下代码定义了一个组件，其中包含两个具名插槽：

<template>
  <div>
    <h1>组件标题</h1>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

当使用这个组件时，父组件可以通过 v-slot 指令和 name 属性来将内容传递到不同的插槽中。例如，以下代码使用这个组件并传递了内容：

<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>这是头部的内容</h1>
      </template>
      <template v-slot:content>
        <p>这是主体的内容</p>
      </template>
    </MyComponent>
  </div>
</template>

当这个组件被渲染时，<slot> 标签将被父组件传递的内容替换，最终的 HTML 代码如下：

<div>
  <h1>组件标题</h1>
  <h1>这是头部的内容</h1>
  <p>这是主体的内容</p>
</div>

作用域插槽

作用域插槽是 Vue 中的另一个强大的特性，它允许我们在插槽中访问父组件的数据和方法。例如，以下代码定义了一个组件，其中包含一个作用域插槽：

<template>
  <div>
    <h1>组件标题</h1>
    <slot :name="name" :age="age"></slot>
  </div>
</template>

当使用这个组件时，父组件可以通过 v-slot 指令和 scope 属性来将数据和方法传递到作用域插槽中。例如，以下代码使用这个组件并传递了数据和方法：

<template>
  <div>
    <MyComponent>
      <template v-slot:default="slotProps">
        <h1>{{ slotProps.name }}</h1>
        <p>年龄：{{ slotProps.age }}</p>
      </template>
    </MyComponent>
  </div>
</template>

当这个组件被渲染时，<slot> 标签将被父组件传递的内容替换，最终的 HTML 代码如下：

<div>
  <h1>组件标题</h1>
  <h1>John Doe</h1>
  <p>年龄：30</p>
</div>

结语

Vue 插槽是一个非常强大的特性，它可以帮助我们构建更加灵活和可复用的组件。通过使用插槽，我们可以轻松地将内容从父组件传递到子组件，也可以为组件定义默认值和具名插槽。作用域插槽则允许我们在插槽中访问父组件的数据和方法，从而使得组件更加灵活和可重用。掌握 Vue 插槽的用法可以帮助我们编写出更加优雅和可维护的代码。