vue 封装面包屑组件教程

我看过一篇关于程序员写博客的文章，他说很多的程序员过了两年写了很多的代码，但是回想起来自己具体做了哪些技术点，遇到坑几乎没有印象，所以说文字是记录的最好方式，好记性不如烂笔头，可以方便自己以后查看，在写的过程中也会再加深一遍印象，我也来折腾折腾。

第一次写文章就写一个比较有意义的吧，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 封装面包屑组件教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。