我看过一篇关于程序员写博客的文章，他说很多的程序员过了两年写了很多的代码，但是回想起来自己具体做了哪些技术点，遇到坑几乎没有印象，所以说文字是记录的最好方式，好记性不如烂笔头，可以方便自己以后查看，在写的过程中也会再加深一遍印象，我也来折腾折腾。
第一次写文章就写一个比较有意义的吧，18年四月末来到目前所在的这家公司，熟悉了一周环境和代码后，新的任务就是使用vue+element-ui来重构之前老版本的项目，我主要负责就是用户管理的一个模块，因为之前没有用过vue所以恶补了一周的vue了解了一些指令和vuex就开始做项目，排版使用的就是element-ui，这个ui框架用起来是比较方便的，因为对于金融行业pc端来说页面没有太炫他华丽，这个ui框架刚好符合我们的需求
遇到的第一个功能点就是面包屑，因为每个页面都会需要用到，所以经理提议把它封装起来
效果图
子组件
首先新建一个页面（子组件），把页面的基本样式实现出来，这里是自己写的div+css
子组件是封装好的一个例子，而父组件是每一个页面，页面中需要用到面包屑时就引入
父组件
调用子组件
引入子组件路径
注册组件
给子组件传的值
局部组件注册在components，可以在里面注册多个
这个里面涉及到一个点就是父组件给子组件传参
总的来说父传子就是这三个步骤：父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。
获取父组件的数据的方式props，定义接收值的类型，文章中接收值的类型是数组
但是有要注意的点：
子组件接受的父组件的值分为——引用类型和普通类型两种，
普通类型：字符串（string）、数字（number）、布尔值（boolean）、空（null）
引用类型：数组（array）、对象（object）
其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，
但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。
补充知识：vue element组件实现步骤条形式的复杂表单信息的注册
实际效果如下
vue代码如下
后台是用java的ssh框架做的
以上这篇vue 封装面包屑组件教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
