vue 封装面包屑组件

我看过一篇关于程序员写博客的文章,他说很多的程序员过了两年写了很多的代码,但是回想起来自己具体做了哪些技术点,遇到坑几乎没有印象,所以说文字是记录的最好方式,好记性不如烂笔头,可以方便自己以后查看,在写的过程中也会再加深一遍印象,对于我这个技术小白来说写博客是为了让我对某一个知识点加深一遍印象。
第一次写文章就写一个比较有意义的吧,18年四月末来到目前所在的这家公司,熟悉了一周环境和代码后,新的任务就是使用vue+element-ui来重构之前老版本的项目,我主要负责就是用户管理的一个模块,因为之前没有用过vue所以恶补了一周的vue了解了一些指令和vuex就开始做项目,排版使用的就是element-ui,这个ui框架用起来是比较方便的,因为对于金融行业pc端来说页面没有太炫他华丽,这个ui框架刚好符合我们的需求
遇到的第一个功能点就是面包屑,因为每个页面都会需要用到,所以经理提议把它封装起来

效果图

子组件

首先新建一个页面(子组件),把页面的基本样式实现出来,这里是自己写的div+css
子组件是封装好的一个例子,而父组件是每一个页面,页面中需要用到面包屑时就引入

父组件

调用子组件
引入子组件路径
注册组件
给子组件传的值

局部组件注册在components,可以在里面注册多个

这个里面涉及到一个点就是父组件给子组件传参

总的来说父传子就是这三个步骤:父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。

获取父组件的数据的方式props,定义接收值的类型,文章中接收值的类型是数组

但是有要注意的点:

子组件接受的父组件的值分为——引用类型和普通类型两种,

普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)

引用类型:数组(Array)、对象(Object)

其中,普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值,

但是,引用类型的值,当在子组件中修改后,父组件的也会修改,那么后果就是,其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做,否则最好不要这么做。

以上就是我的第一篇章,写的有很多不足的地方,希望大家多多指教,以上的内容希望也可以帮助大家!

猜你喜欢

转载自blog.csdn.net/weixin_43609391/article/details/83748295
今日推荐