剖析 Vue 组件插槽：赋能动态 UI

2023-09-19 12:42:42

在 Vue.js 的世界中，组件插槽扮演着至关重要的角色，赋予了开发人员创建动态且可复用 UI 组件的超能力。通过插槽，组件可以轻松地接受和显示来自父组件的数据或内容，从而实现模块化和代码重用。

匿名插槽：内容的简单传递

匿名插槽是最基本的插槽类型，它允许开发人员在父组件中向子组件传递内容，而无需指定插槽的名称。

语法：<slot>

示例：

<!-- 父组件 -->
<MyComponent>
  <p>这是要传递的内容。</p>
</MyComponent>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

具名插槽：指定内容的位置

具名插槽允许开发人员指定插槽的名称，以便在父组件中更精确地定位内容。

语法：<slot name="插槽名称">

示例：

<!-- 父组件 -->
<MyComponent>
  <template v-slot:header>
    <h1>这是头部内容。</h1>
  </template>

  <template v-slot:footer>
    <p>这是底部内容。</p>
  </template>
</MyComponent>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

动态插槽：灵活的插槽分配

动态插槽允许开发人员根据需要动态地指定插槽的名称。这在构建通用且灵活的组件时非常有用。

语法：<slot :name="插槽名称变量">

示例：

<!-- 父组件 -->
<MyComponent :slot-name="dynamicSlotName">
  <p>这是要传递的内容。</p>
</MyComponent>

<!-- 子组件 -->
<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

作用域插槽：传递数据和函数

作用域插槽是一种特殊类型的插槽，它允许子组件接收来自父组件的数据和函数。这使得创建交互性和可重用性更强的组件成为可能。

语法：<slot scope="作用域变量">

示例：

<!-- 父组件 -->
<MyComponent>
  <template v-slot:custom-slot="{ message, handleClick }">
    <button @click="handleClick">{{ message }}</button>
  </template>
</MyComponent>

<!-- 子组件 -->
<template>
  <div>
    <slot scope="props">
      <button @click="props.handleClick">{{ props.message }}</button>
    </slot>
  </div>
</template>