elementui源码学习之仿写一个el-bread elementui源码学习之仿写一个e

本篇文章记录仿写一个el-bread组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以拉下来，npm start运行跑起来，结合注释有助于更好的理解。github仓库地址如下：
https://github.com/shuirongsh...

什么是面包屑直观来说，面包屑其实就相当于一个导航跳转的快捷操作方式。那么为什么这么叫呢？源自格林童话：

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们在网站中的位置以及如何返回。

源自百度百科：https://baike.baidu.com/item/...
组件需求分析关于bread面包屑组件，主要是用于展示当前页面所在的层级位置，告知用户在哪里，且能够点击面包屑做路由跳转（返回），我们分析一下面包屑组件的需求，大致有以下：

面包屑分隔内容需求
- 默认分隔内容，比如饿了么UI的面包屑导航默认就是以斜杠 / 分隔的
- 如果我们觉得默认分隔斜杠 / 不好看，也可自己传递分隔内容，比如以 >> 分隔
跳转功能需求
- 比如push跳转，即：this.$route.push(...)
- 或者replace跳转，即：this.$route.replace(...)

整理来说，这两个需求都是挺简单的，不过我们再看下方封装的代码之前需要复习一下组件中用到的知识：provide和inject
provide、inject的知识点复习一言以蔽之：祖先组件provide提供数据，后代组件（包含子组件）inject接收数据
关于provide和inject我们可以这样的类比理解：

父传子，是父组件使用冒号:绑定传递，子组件使用props接收数据
而祖先传后代，祖先使用provide绑定传递（提供），后代使用inject接收数据（注入）

只说文字，有点不太直观，所以我们看一下下面这个案例就理解了
小案例
此案例是分为三个组件，分别是one组件、two组件、three组价，one组件是two组件的父组件、two组件是three组件的父组件。即关系为：one、two、three三个组件构成了爷、父、子这样关系的祖先组件和后代组件
one组件中有name和age两个字段的数据，需要提供到two组件和three组件中使用
案例代码图示分析

文章图片

案例效果图

文章图片

理解了这个小案例，再看下方的代码会更好明晰思路
为甚要提到provide和inject呢？因为在封装面包屑组件的时候，官方是分为两个组件，el-breadcrumb和el-breadcrumb-item；在el-breadcrumb组件中使用到了provide提供默认分隔内容斜杠/和分隔内容的图标class类名给后代组件el-breadcrumb-item使用。

接下来我们看一下仿写封装的组件代码

封装代码封装的效果图

文章图片

使用组件的代码
类似官方的面包屑组件代码，这里我们也用两个面包屑组件代码，为：my-bread组件和my-bread-item组件（祖先后代关系）

my-bread组件代码

.breadWrap { font-size: 14px; // 第一个面包屑的文字加粗 /deep/ .breadItem:first-child .breadItemWords { font-weight: 700; } // 最后一个面包屑的小图标隐藏 /deep/ .breadItem:last-child .breadItemDivide { display: none; } }

my-bread-item组件代码

.breadItem { display: inline-block; .breadItemWords { font-weight: 400; } .isLink { font-weight: 700; } .isLink:hover { color: #409eff; cursor: pointer; } .breadItemDivide { margin: 0 8px; color: #999; } }

总结 【elementui源码学习之仿写一个el-bread】个人愚见provide和inject主要使用的场景还是组件封装这一块，貌似在业务代码中使用的少