前端妙手，DOM传输得心应手：slot插槽和作用域插槽的奥妙

2023-10-29 06:24:51

Slot 插槽：构建可重用组件的桥梁

在 Vue.js 中，组件是可重用的代码块，负责渲染特定 UI 元素。为了让组件之间进行有效通信，引入了 Slot 插槽，它充当父组件和子组件之间的桥梁，允许 DOM 结构在组件之间传递。

Slot 插槽的工作原理

Slot 插槽使父组件能够将特定 DOM 结构传递给子组件，而子组件负责解析和渲染这些结构。这在构建可重用的 UI 组件库时非常有用，因为组件之间的数据传递变得清晰且灵活。

以下是一个使用 Slot 插槽的简单示例：

<!-- 父组件 -->
<template>
  <div>
    <Card>
      <template v-slot:title>
        <h1>这是标题</h1>
      </template>
      <template v-slot:body>
        <p>这是正文</p>
      </template>
    </Card>
  </div>
</template>

<!-- 子组件 Card.vue -->
<template>
  <div>
    <h1 v-bind="$slots.title"></h1>
    <p v-bind="$slots.body"></p>
  </div>
</template>

在这个例子中，父组件使用 <template v-slot:title> 和 <template v-slot:body> 将标题和正文内容填充到 Card 组件中。Card 组件则使用 <h1 v-bind="$slots.title"></h1> 和 <p v-bind="$slots.body"></p> 解析和渲染这些内容。

作用域插槽：数据驱动的可重用模板

作用域插槽是 Slot 插槽的进阶形态。它们允许子组件访问父组件的数据和方法，从而实现更动态和数据驱动的可重用模板。作用域插槽通过 <template v-slot:scope="{ 父组件数据和方法 }"> 的形式定义，其中 { 父组件数据和方法 } 代表父组件传递给子组件的数据和方法。

以下是一个使用作用域插槽的示例：

<!-- 父组件 -->
<template>
  <div>
    <Card>
      <template v-slot:default="{ title, body }">
        <h1>{{ title }}</h1>
        <p>{{ body }}</p>
      </template>
    </Card>
  </div>
</template>

<!-- 子组件 Card.vue -->
<template>
  <div>
    <h1 v-bind="$slots.default.title"></h1>
    <p v-bind="$slots.default.body"></p>
  </div>
</template>

在这个例子中，父组件使用 <template v-slot:default="{ title, body }"> 将标题和正文数据传递给 Card 组件。Card 组件则使用 <h1 v-bind="$slots.default.title"></h1> 和 <p v-bind="$slots.default.body"></p> 解析和渲染这些数据。由于使用了作用域插槽，Card 组件可以访问父组件的 title 和 body 数据，并根据这些数据动态地渲染卡片内容。