你不可不知的 Vue 组件通信之 slot 和 slot-scope 的原理

2024-02-21 00:26:10

在 Vue.js 中，slot 和 slot-scope 是两个强大的特性，可以实现组件之间的通信和封装。理解并掌握它们的原理对于 Vue 开发人员来说至关重要。

Slot

Slot 是一个占位符，允许我们在组件中定义内容，然后在使用组件时，可以用其他内容替换这个占位符。这使得我们可以创建可重用的组件，而无需担心组件内部的内容。

例如，我们可以创建一个按钮组件，其中包含一个 slot，用于显示按钮的文本。然后，我们在使用按钮组件时，可以传入不同的文本内容，以生成不同的按钮。

<!-- 按钮组件 -->
<button>
  <slot></slot>
</button>

<!-- 使用按钮组件 -->
<my-button>点击我</my-button>

Slot-scope

Slot-scope 允许我们在 slot 中访问组件的数据和方法。这使得我们可以创建更灵活和动态的组件。

例如，我们可以创建一个列表组件，其中包含一个 slot，用于显示列表中的每一项。然后，我们在使用列表组件时，可以传入一个函数，该函数将在 slot 中执行，并接收列表中的每一项作为参数。

<!-- 列表组件 -->
<ul>
  <slot v-for="item in items" :item="item"></slot>
</ul>

<!-- 使用列表组件 -->
<my-list :items="['item1', 'item2', 'item3']">
  <template v-slot:default="slotProps">
    <li>{{ slotProps.item }}</li>
  </template>
</my-list>