了解 Vue 组合 API 中的槽

插槽是 Vue 中的一种强大机制，它使组件能够定义可由父组件自定义的内容区域。这提高了构建 UI 组件的可重用性和灵活性。 Vue 3 提供两种主要插槽类型：

• Normal Slots：提供一种简单的方法将父组件的内容注入到子组件的模板中。
• 范围插槽：通过将数据（范围）从子组件传递到插槽内容，允许进行更高级的自定义，从而实现基于父数据和子数据的动态渲染。

在 Vue 3 中，槽允许您通过提供将内容传递到子组件的方式来创建灵活的组件。 Composition API 增强了我们使用槽的方式，使其更加直观和强大。

什么是老虎机？

插槽是一种在组件中定义占位符内容的方法，在使用组件时可以用自定义内容填充该占位符内容。它们有助于创建可重用和可定制的组件。

老虎机类型

• 默认插槽：最常见的类型，它允许您传递没有任何特定名称的内容。
• 命名插槽：允许您使用唯一的名称指定不同的插槽，从而实现更复杂的布局。
• 作用域插槽：它们提供了一种使用插槽将数据从子组件公开到父组件的方法。 通过 Composition API 使用槽

将槽与组合 API 一起使用

以下是如何使用 Composition API 在 Vue 3 组件中定义和使用槽：
默认插槽示例

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

用法：

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

命名插槽

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

用法：

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

范围插槽

作用域插槽允许您将数据从子组件传递回父组件。

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

用法：

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

示例：Vue 3 中带有插槽的食品交付

让我们使用 Vue 3 以及 Composition API 和 slot 创建一个简单的食品配送应用程序。此示例将展示一个主要的 FoodDelivery 组件，该组件使用插槽来显示食品列表以及页眉和页脚。

第 1 步：创建主要组件

这是 FoodDelivery 组件，它接受页眉、食物项和页脚的命名槽。

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

第 2 步：创建食品组件

接下来，让我们创建一个简单的 FoodItem 组件来代表各个食品。

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

第 3 步：使用组件

现在，让我们将所有内容放在使用 FoodDelivery 和 FoodItem 组件的父组件中。

让我解释一下

FoodDelivery 组件：该组件充当我们的食品配送服务的布局。它接受三个槽：标题、食品的默认槽和页脚。
FoodItem 组件：这代表单个食品。它以名称和价格作为道具，并具有模拟将商品添加到购物车的方法。

• 应用程序组件：这是将所有内容聚集在一起的父组件。它使用 FoodDelivery 组件，并用欢迎消息、FoodItem 组件列表和感谢消息填充槽。

使用案例

• 自定义列表：作用域插槽非常适合创建列表组件，其中每个项目都可以根据其属性具有不同的渲染逻辑。子组件可以将项目数据传递到插槽，父组件可以使用作用域插槽为每个项目定义模板。 (BasePaginated.vue)
• 条件渲染： 作用域插槽可以根据子组件向插槽提供的数据进行选择性渲染。例如，您可以有条件地在槽内容中显示消息或错误状态。
• 复杂布局：作用域插槽有助于创建更复杂的布局，其中布局的不同部分可以由父组件自定义，同时允许子组件使用作用域注入特定内容或功能。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

高级注意事项

• 命名作用域插槽：您可以为作用域插槽分配名称（例如...），使您能够在单个子组件中拥有多个作用域插槽，并在父组件中按名称引用它们。
• 槽函数：在 Vue 2 中，槽在子组件中作为 $slots 进行访问。 Vue 3 使用 $scopedSlots 提供了一种更具反应性的方法，这些函数提供对插槽内容的访问。这允许在子组件内进行动态槽操作和条件渲染。

让我们增强作用域插槽示例，使其更清晰、更实用。此示例将演示如何使用作用域槽将项目数据从子组件传递到父组件，从而实现灵活的渲染。

第 1 步：创建 ItemList 组件

此组件将显示项目列表，并使用作用域插槽来允许父级自定义每个项目的渲染方式。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

步骤 2：将 ItemList 组件与作用域槽一起使用

现在，让我们创建一个使用 ItemList 组件的父组件，并提供一个自定义模板，用于使用作用域插槽渲染每个项目。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

项目列表组件：

• 该组件定义了一个项目列表，并使用作用域槽将每个项目公开给父组件。
• 如果没有提供槽位，则默认显示项目的描述。 ###父组件：
• 该组件使用 ItemList 并提供用于渲染每个项目的自定义模板。
• 它通过作用域插槽访问项目数据，并包含一个单击时会触发功能的按钮。

该示例演示了如何在 Vue 3 中有效地使用作用域槽来创建灵活且可重用的组件结构。父组件可以自定义每个项目的渲染，同时仍然访问子组件提供的数据。

让我们回顾一下

此示例说明了如何利用 Vue 3 应用程序中的槽来创建灵活的食品配送组件系统。您可以轻松自定义页眉、页脚和内容，而无需修改主要组件。如果您还有任何其他问题或需要更多详细信息，请随时在评论中提问。

通过使用 Composition API 有效利用 Vue 3 中的普通槽和范围槽，您可以构建高度可重用和可定制的 UI 组件，从而提高 Vue 应用程序中的可维护性和代码组织。您可以根据您的具体内容注入和动态渲染需求选择合适的槽类型。
成长的方式就是联系。
快乐编码！

以上是了解 Vue 组合 API 中的槽的详细内容。更多信息请关注PHP中文网其他相关文章！