封装组件的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(<i className="iconfont icon-angle-right"></i>) } })
return <div className="bread">{children}</div> }}
思路分析：
1.准备有效的供遍历的数组数据， slotContent数组中得到的数据只有item.type.name==='BreadItem'的数据，其它标签都不会被获取到(这里的BreadItem也是自行封装的组件）
2.准备一个新空数组
3.遍历数组每循环一次给空对象push一个item,也就是BreadItem的标签
4.当满足条件的前提下，push一个<i>标签，原理如下：
最终的数据就['item1' , > , 'item2' , > , 'item3' ]======>渲染结果就是 item1 > item2 > item3
