vue3——封装面包屑功能组件

一.为什么需要面包屑

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。

看完上面的介绍，相信各位已经理解了面包屑组件的使用场景了。对的，没错，是用来记录我们点击了哪些页面，方便我们再返回之前某一个页面。

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二.初级封装

1.实现思路

• 在public目录下的index.html中引入cdn的字体图标资源

• 将需要外部传入的值定义为自定义属性
• 将外部写在标签内部的内容放置在默认插槽中

2. 代码演示
   在src/libs目录下新建bread-crumbs-item.vue文件，
   代码示例：

在src/libs目录下新建bread-crumbs.vue文件，，将导航的每一项放置在默认插槽中

3. 使用
   使用的时候，有多少个二级导航就使用几个BreadCrumbsItem
   代码如下（示例）：

4. 不足
   在最后一个导航后面会有多余的一个>指示标识

三.高阶封装

修改BreadCurmbsItem组件内的代码：

template>
  

    
    
  

修改BreadCrumbs.vue中的代码：

1. 使用

2. 效果图展示

   
   
   面包屑效果图

四.使用jsx优化

可以将高阶写法中的功能代码使用jsx的方式进行重写，jsx写出来的代码更加的简洁明了。

  name: 'BreadCrumbs',
  render () {
    // vue2的render函数的形参是 h 函数
    // vue3中h函数是导入的
    // createElement(标签名称, 标签的属性, 标签的子元素)
    // console.dir(this.$slots.default())
    // 获取XtxBread组件的所有的插槽里面填充组件实例
    const items = this.$slots.default()
    const results = []
    items.forEach((item, index) => {
      results.push(item)
      // 手动生成一个i图标，添加到面包屑项目的后面
      if (index < items.length - 1) {
        results.push()
      }
    })

    return 
{results}
  }
}