Elementui源码学习模仿一个el-bread

.breadWrap{font-size:14px;//第一个面包屑的文本是粗体/deep/.breadItem:first-child.breadItemWords{font-weight:700;}//最后一个面包屑的小图标隐藏/深/.breadItem:last-child.breadItemDivide{display:none;}}本文记录了模仿一个el-bread组件的细节，帮助大家更好的理解饿了么UI对应组件的具体工作细节。本文是elementui源码学习模仿系列的另一篇文章，有空会持续更新模仿其他组件。源码在github上，大家可以拉下来，npmstart运行，结合注释帮助大家更好的理解。github仓库地址如下：https://github.com/shuirongsh...什么是面包屑直观上，面包屑其实相当于导航和跳转的快捷方式。那为什么叫它呢？源于格林童话：面包屑导航的概念来源于童话故事《韩赛尔与格蕾特》。韩赛尔和格蕾特穿过森林时，不小心迷了路，但他们找到了沿途走过的地方。他们都撒了面包屑，让这些面包屑帮助他们找到回家的路。因此，面包屑的作用是告诉访问者他们在网站上的位置以及如何返回。来自百度百科：https://baike.baidu.com/item/...组件需求分析关于breadcrumb组件，主要用于显示当前页面的层级位置，告知用户它在哪里，可以点击breadCrumbs做路由跳转（返回），我们分析一下breadcrumb组件的需求，大致如下：breadcrumbs默认将内容分开。例如，UI的面包屑导航默认由斜杠分隔。如果觉得默认的斜线/分隔不好看，也可以自己传递分隔的内容，比如用>>分隔跳转函数，比如push跳转，即：this.$route.push(...)或替换跳转，即：this.$route.replace(...)综上所述，这两个需求还是比较简单的，但是在看下面封装的代码之前，我们需要温习一下所用到的知识组件中：provide和injectprovide，inject知识点的回顾可以用一个词来概括：祖先组件provide提供数据，后代组件（包括子组件）inject接收数据。关于provide和inject，我们可以这样理解：parenttochild，父组件用冒号：bindingtransfer，子组件用props接收数据，祖先传给后代。祖先使用providebinding传递（provide），后代使用inject接收数据（injection）。只讲文字有点不直观，所以我们来看下面这个案例来理解这个小案例这个案例分为三个组件，分别是一个组件，两个组件，三个组件。一组件是二组件的父组件，二组件是三组件的父组件。即关系为：一、二、三三个成分构成了父父子关系的祖先成分和后代成分。需要提供一个组件中name和age这两个字段的数据，供二组件和三组件使用。案例代码图分析案例效果图了解了这个小案例之后，再看看下面的代码会更好。为什么会提到provide和inject呢？因为在封装breadcrumb组件的时候，官方分为两个组件，el-breadcrumb和el-breadcrumb-item；在el-breadcrumb组件中，provide提供了图标类类，提供了默认的分隔内容斜杠/和分隔内容名称被后代组件el-breadcrumb-item使用。接下来我们来看一下打包组件代码打包代码包的效果图。使用的组件代码与官方面包屑组件代码类似。这里我们还使用了两个breadcrumb组件代码，分别是：my-bread组件和my-bread-item组件（祖孙关系）my-bread组件代码.breadWrap{font-size:14px;//第一个面包屑的文本是粗体/deep/.breadItem:first-child.breadItemWords{font-weight:700;}//最后一个面包屑的小图标隐藏/深/.breadItem:last-child.breadItemDivide{display:none;}}my-bread-item组件代码.breadItem{display:inline-block;.breadItemWords{字体粗细：400；}.isLink{字体粗细：700；}。isLink:hover{颜色:#409eff;游标：指针；}.breadItemDivide{边距：08px；颜色：#999；}}综上所述，个人愚见provide和inject主要用于组件封装。好像很少在业务代码中使用