深入剖析 Vue.js 中的插槽类型：默认插槽、具名插槽和作用域插槽

2023-11-27 06:33:15

引言

Vue.js 中的插槽是构建可重用和灵活组件的关键特性。通过插槽，开发人员可以在父组件中定义内容区域，由子组件动态填充。这种机制简化了组件的复用，消除了对繁琐逻辑判断和大量模板代码的需要。

默认插槽

默认插槽是 Vue.js 中最简单的插槽类型。它允许子组件在父组件中定义的任何内容区域中插入内容。默认情况下，父组件中未指定插槽名称的内容将插入默认插槽。

示例：

<!-- 父组件 -->
<my-component>
  <div>默认插槽的内容</div>
</my-component>

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

具名插槽

具名插槽允许父组件定义具有特定名称的内容区域。子组件可以使用 v-slot 指令来指定要插入内容的具名插槽。

示例：

<!-- 父组件 -->
<my-component>
  <template v-slot:header>
    <h1>组件标题</h1>
  </template>
  <template v-slot:body>
    <p>组件内容</p>
  </template>
</my-component>

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

作用域插槽

作用域插槽是插槽类型中最强大的。它允许子组件访问父组件的作用域数据。这使得子组件可以动态地根据父组件的状态渲染内容。

示例：

<!-- 父组件 -->
<my-component>
  <template v-slot:item="slotProps">
    {{ slotProps.item.name }}
  </template>
</my-component>

<!-- 子组件 -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item"></slot>
    </li>
  </ul>
</template>