Vue 命名插槽与作用域插槽：赋能灵活组件内容分发

2023-10-19 15:22:02

在 Vue 的组件化开发中，插槽（Slots）是一个强大的功能，允许你在父组件中定义子组件的内容。Vue 提供了两种类型的插槽：命名插槽和作用域插槽，它们使组件之间的内容分发变得更加灵活和可定制。

命名插槽

命名插槽允许你在父组件中为子组件指定特定名称的插槽，并在子组件中使用该名称来填充内容。命名插槽的语法非常简单，只需在父组件中使用 <slot> 标签并为其指定一个名称，并在子组件中使用 <template> 标签并为其指定与父组件中的插槽名称相同的名称即可。

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

<!-- 子组件 -->
<template>
  <div>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
    <template v-slot:content>
      <p>这是主体内容</p>
    </template>
    <template v-slot:footer>
      <p>这是尾部内容</p>
    </template>
  </div>
</template>

作用域插槽

作用域插槽允许你在父组件中定义一个插槽，并在子组件中使用该插槽的内容。作用域插槽的语法与命名插槽类似，但需要在父组件中使用 <slot scope="props"> 标签，并在子组件中使用 <template v-slot="props"> 标签。

<!-- 父组件 -->
<template>
  <div>
    <slot scope="props">
      <p>父组件数据：{{ props.data }}</p>
    </slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <template v-slot="props">
      <h1>子组件内容</h1>
      <p>父组件数据：{{ props.data }}</p>
    </template>
  </div>
</template>