Vue组件的抽离和封装

1.背景

 日常开发中，有时候有些组件是功能类似甚至完全相同的情况，这个时候我们完全没必要再重新写一个，
可以抽离复用可以减少大量的时间，案例：

 像一些App底部的标签页，在进行一些标签的跳转时，底部的只是变化选中时的字体颜色和图标，
大部分的元素都相同。

2.抽离思路

2.1先抽出一个大的可以装里面小组件的大容器TabBar

<div class='tabBar'><tab-bar-item v-for="(val,index) in navBar" :path='val.path' fontColor='#009E97'><template v-slot:icon-active><img :src="val.activeImg"></template><template v-slot:icon-inactive><img :src="val.inactiveImg"></template><template v-slot:text>{{val.name}}</template></tab-bar-item></div>

2.2实现里面各个小组件，这里要用具名插槽

<div class='tabBarItem' @click="itemHandle"><div v-if="iconActive"><slot name="icon-active"></slot></div><div v-else="!iconActive"><slot name="icon-inactive"></slot></div><div :style="changeColor" class="text"><slot name="text"></slot></div></div>

 因为底部的标签页跳转是要更换图标，因此可以用v-if，v-else来控制显示。

2.3要使得这类组件具有通用性和复用性，有些数据是不能写死的。

                             tabBarItem.vue
props: {path: String,fontColor: {type: String,default: "#A3A3A3",},},

 我们可以在tabBar通过传递path，fontColor来改变里面子组件相关的属性，更多的属性可以
视情况而定

2.4根据路由跳转来对比父组件传进来的路径，可以得出哪个标签点击。

 computed: {//根据路由判断图标的激活状态iconActive() {return this.$route.path === this.path;},changeColor() {//标签页点击了则进行 判断，改变对应点击的字体颜色if (this.$route.path === this.path) {return { color: "#009E97" };} else {return { color: "#A3A3A3" };}},},methods: {itemHandle() {this.$router.push(this.path);},},

3.优点

1.节省时间，减少代码
2，组件利用率高，适用性广
3.减少代码的堆积，代码模块化，便于维护和修改

Vue组件的抽离和封装相关推荐

vue 封装组件供全局使用_vue 封装组件的基本操作
/**1.封装组件局部封装**/ // 1.创建组件构造器对象 const cpnC = Vue.extend({ template: ` <div> </div>` }) ...
vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js
封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护.好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用. 本文讲述了如何一步步从0到1封 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
Vue组件自调用/无限递归导航/element-ui导航封装
Vue组件自调用概念 Vue组件中必须使用name属性才可以自己调用自己 <template><div>内容<my-nav/></div> </t ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
vue组件封装: vue-popper+FloatManager
文章目录前言效果展示正文 FloatManager vue-Popper attributes slots events 对vue-popper进一步封装 html js css 过渡写在最后 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
封装Vue组件的原则及技巧
封装Vue组件的原则及技巧 Vue的组件系统 Vue组件的API主要包含三部分:prop.event.slot props表示组件接收的参数,最好用对象的写法,这样可以针对每个属性设置类型.默认值或自 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...

Vue组件的抽离和封装

1.背景

2.抽离思路

2.1先抽出一个大的可以装里面小组件的大容器TabBar

2.2实现里面各个小组件，这里要用具名插槽

2.3要使得这类组件具有通用性和复用性，有些数据是不能写死的。

2.4根据路由跳转来对比父组件传进来的路径，可以得出哪个标签点击。

3.优点

Vue组件的抽离和封装相关推荐

最新文章

热门文章