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

目的： 封装一个简易的面包屑组件，适用于两级场景。
大致步骤：

• 准备静态的 shop-bread.vue 组件
• 定义 props 暴露 parentPath parentName 属性，默认插槽，动态渲染组件
• 在 library/index.js 注册组件，使用验证效果。 基础结构 src/components/library/shop-bread.vue

<template>
  <div class='shpo-bread'>
    <div class="shop-bread-item">
      <RouterLink to="/">首页</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="shop-bread-item">
      <RouterLink to="/category/10000">电器</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="shop-bread-item">
      <span>空调</span>
    </div>
  </div>
</template>

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

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

定义props进行渲染 src/components/library/shop-bread.vue

<template>
  <div class='shop-bread'>
    <div class="shop-bread-item">
      <RouterLink to="/">首页</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>
    <div class="shop-bread-item" v-if="parentName">
      <RouterLink v-if="parentPath" :to="parentPath">{{parentName}}</RouterLink>
      <span v-else>{{parentName}}</span>
    </div>
    <i v-if="parentName" class="iconfont icon-angle-right"></i>
   <div class="shop-bread-item">
      <span><slot /></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XtxBread',
  props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }
}
</script>

注册使用 src/components/library/index.js

import ShopBread from './shop-bread.vue'

export default {
  install (app) {
      app.component(ShopBread.name, ShopBread)

使用： <ShopBread parentPath="/category/1005000" parentName="电器">空调</ShopBread> 总结：

1. 封装基本的面包屑组件
2. 仅仅支持二级导航，不够灵活(不支持无限级别导航) 在下一篇文章中将对这次封装的面包屑组件存在的问题进行优化