手动封装面包屑组件（Vue3）

封装组件的js代码

面包屑组件封装逻辑

（BreadItem里面就是放了一个可以点击的链接，分为两种情况，可以跳转和不可以跳转,如果有指定跳转路径，那么就跳转，反之则不允许跳转）

使用示例

这里的Bread和BreadItem都是单独封装的全局组件，之后哪里需要面包屑哪里直接使用

export default {  name: 'Bread', 

 render() {             // Vue2中h函数是render的形参    // Vue3的h函数是按需导入的 

 // 只过滤留下名称为BreadItem的标签    

const slotContent = this.$slots.default().filter(item => item.type.name === 'BreadItem')    

const children = [ ]    

slotContent.forEach((item, i) => {      

  // 添加单个BreadItem组件     

 children.push(item)     

 if (i < slotContent.length - 1) {      

children.push()  }   })    

return {children}

  }}

思路分析：

1.准备有效的供遍历的数组数据， slotContent数组中得到的数据只有item.type.name==='BreadItem'的数据，其它标签都不会被获取到(这里的BreadItem也是自行封装的组件）

2.准备一个新空数组

3.遍历数组每循环一次给空对象push一个item,也就是BreadItem的标签

4.当满足条件的前提下，push一个标签，原理如下：

结论就是'在当前索引值小于最大索引值的地方添加箭头'

最终的数据就['item1' , > , 'item2' , > , 'item3' ]======>渲染结果就是 item1 > item2 > item3