Vue3系列--手动封装面包屑组件(中级)

上一篇文章中我们手动封装了一个面包屑组件，但是还是存在一些小问题，我们在这篇文章中进行一些优化。
我们先来参考一下element-ui的面包屑组件：

大致步骤：

• 使用插槽和封装选项props组件完成面包屑组件基本功能，最后一项多一个图标。
• 通过 render 渲染，h 函数封装面包屑功能。 我们需要两个组件，shop-bread 和 shop-bread-item 才能完成动态展示。
  定义单项面包屑组件 src/components/library/shop-bread-item.vue

<template>
  <div class="shop-bread-item">
    <RouterLink v-if="to" :to="to"><slot /></RouterLink>
    <span v-else><slot /></span>
    <i class="iconfont icon-angle-right"></i>
  </div>
</template>
<script>
export default {
  name: 'ShopBreadItem',
  props: {
    to: {
      type: [String, Object]
    }
  }
}
</script>

在 library/index.js注册

import 'XtxBreadItem' from './xtx-bread-item.vue'
export default {
  install (app) {
      app.component(XtxBreadItem.name, XtxBread)

过渡版，完成上边的步骤之后会发现结构缺少风格图标，如果在item中加上话都会有图标，但是最后一个是不需要的。

<template>
  <div class='shop-bread'>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'ShopBread'
}
</script>

<style scoped lang='less'>
.shop-bread {
  display: flex;
  padding: 25px 10px;
  :deep(&-item) {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @shopColor;
      }
    }
  }
  :deep(i) {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>

面包屑

<ShopBread>
    <ShopBreadItem to="/">首页</ShopBreadItem>
    <ShopBreadItem to="/category/1005000">电器</ShopBreadItem>
    <ShopBreadItem >空调</ShopBreadItem>
</ShopBread>

总结：

1. 封装两个组件shop-bread和shop-bread-item
2. 使用默认插槽
3. 利用scoped和, :deep选择器 经过这次优化之后我们的面包屑组件已经比之前有了很大的改善，但是任然存在一些小问题，我们将在下一篇文章，手动封装面包屑组件高级篇中进行介绍