Vue3 巧用插槽和 Props 封装专业面包屑组件

前端

2023-12-21 16:47:57

在之前的文章中，我们踏上了手动封装 Vue3 面包屑组件的征程，虽然取得了一些进展，但仍有瑕疵需要打磨。因此，在本篇文章中，我们将继续优化组件，打造一个更加完善的解决方案。

首先，让我们回顾一下 Element UI 中面包屑组件的外观：

[图片展示面包屑组件的外观]

有了这个直观的参考，我们便可着手重构我们的组件，使其兼具实用性和美观性。

优化之路：插槽与 Props 的默契配合

为了提升组件的灵活性，我们将引入插槽和 Props 两大利器。

插槽允许我们在组件模板中定义占位符，然后在使用组件时通过传递内容来填充这些占位符。这为组件的定制化提供了便利，让开发者可以根据具体需求灵活调整组件的内容。

Props 则是组件与父组件之间通信的桥梁。通过 Props，父组件可以向子组件传递数据和配置项，从而控制子组件的行为。

步骤详解：重构面包屑组件

步骤 1：引入插槽

在我们的面包屑组件中，我们将使用插槽来定义面包屑项的内容。具体来说，我们在组件模板中添加一个名为 "default" 的插槽：

<template>
  <div class="breadcrumb">
    <slot name="default"></slot>
  </div>
</template>

这样，在使用组件时，开发者便可以通过以下方式向组件传递面包屑项：

<Breadcrumb>
  <BreadcrumbItem>首页</BreadcrumbItem>
  <BreadcrumbItem>分类</BreadcrumbItem>
  <BreadcrumbItem>商品详情</BreadcrumbItem>
</Breadcrumb>

步骤 2：定义 Props

接下来，我们将为组件定义 Props，以便在父组件中控制面包屑项的样式和分隔符。具体来说，我们将添加以下 Props：

export default {
  props: {
    separator: {
      type: String,
      default: '/'
    },
    itemClass: {
      type: String,
      default: 'breadcrumb-item'
    }
  }
}

步骤 3：完善组件模板

在组件模板中，我们将根据 Props 的值渲染面包屑项：

<template>
  <div class="breadcrumb">
    <slot name="default">
      <template v-for="item in $slots.default">
        <li class="breadcrumb-item" :class="itemClass">
          <a :href="item.attrs.href">{{ item.children }}</a>
        </li>
      </template>
    </slot>
  </div>
</template>

如此一来，父组件便可以通过设置 Props 来控制面包屑项的分隔符和样式了。

实战演练：在项目中应用组件

为了验证我们的组件是否经得起考验，让我们在实际项目中将其付诸实践：

<template>
  <div>
    <Breadcrumb separator="-" itemClass="custom-item-class">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>分类</BreadcrumbItem>
      <BreadcrumbItem>商品详情</BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>