Vue插槽剖析：多角度解读精彩功能

前端

2023-12-20 19:02:05

Vue 插槽：赋能组件灵活性和可复用性

在 Vue.js 框架中，插槽是一项至关重要的功能，它允许我们在组件中动态插入内容。插槽是一个占位符，我们可以在组件模板中使用 <slot> 元素定义它。组件渲染时，插槽中的内容将替换 <slot> 元素。

插槽类型

Vue 插槽有三种主要类型：

默认插槽： 是最基础的插槽类型，允许我们在组件中插入任意内容。
具名插槽： 允许我们为插槽指定一个名称，然后可以在组件模板中使用该名称引用插槽。
作用域插槽： 允许我们在插槽中访问组件的属性和方法。

插槽用法

要使用插槽，需要在组件模板中定义插槽。我们可以使用 <slot> 元素或 <template> 元素来定义插槽。

<!-- 使用 <slot> 元素定义默认插槽 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 使用 <template> 元素定义具名插槽 -->
<template>
  <div>
    <template v-slot:header>
      <h1>具名插槽标题</h1>
    </template>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

要在组件中使用插槽，可以在组件模板中使用 <slot> 元素引用插槽。

<!-- 使用默认插槽 -->
<template>
  <div>
    <slot>
      <!-- 这里的内容将被默认插槽中的内容替换 -->
    </slot>
  </div>
</template>

<!-- 使用具名插槽 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

插槽复用

插槽复用是指在多个组件中使用同一个插槽。插槽复用可以帮助提高代码的可重用性，减少代码冗余。

要实现插槽复用，需要在父组件中定义插槽，然后在子组件中使用该插槽。

<!-- 父组件模板 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 子组件模板 -->
<template>
  <div>
    <slot name="header">
      <h1>子组件标题</h1>
    </slot>
    <slot name="content">
      <p>子组件内容</p>
    </slot>
    <slot name="footer">
      <button>子组件按钮</button>
    </slot>
  </div>
</template>