基于VUE评论组件的组件自闭声明周期思考
2017-09-25 22:22
429 查看
基于VUE评论组件的组件自闭声明周期思考
以评论回复组件的删除权限做一个思考,如何定义服务化、可公用的组件。业务场景
可删除学生回复的老师可删除自己回复的学生
可删除所有人回复的管理员
…
以上是常见的业务中可能出现的角色权限,甚至还可能出现更加复杂的,在这种场景下,如果将业务判断耦合进入组件,那么可能会出现以下的情景:
<button v-show="isTeacher || isManage || ..."> 删除 </button >
一旦业务改变,组件就将无法维护,多种角色的权限会耦合在一起,修改一处需要验证多处,无法确定对其他业务的影响。
解决办法
使用面向对象的思想,将耦合业务进行抽离,使组件只关心按钮的显隐,从而做成基础的服务化组件。使用自定义事件
在组件层面定义事件,对回复列表数据进行业务相关的处理,然后传入组件循环,让组件只关心该做的,从而降低关注度。<component @beforeDelete="smFun(list)"></component> smFun(list){ ...//业务相关的处理 return list } //返回的list格式 [ { content: '', delete: true } ]
处理后,回复组件本身只需要根据delete属性值控制按钮的显隐,从而脱离了业务,但这样的组件似乎还差点什么,很难用,每次都要写业务控制不是么?
易用性,props传递默认模式
根据上面的业务场景可以看出,类似管理员、学生、或者游客模式是较为常用的,那么不妨就在组件中默认提供,从而解决常用业务。<compenent :isManage="true"></component>//例如管理员 ---------- component.vue <button v-if="isManage">删除</button>
根据当前公司主要业务,梳理出几种常用的模式,就可以减少大量的重复代码,减少关注度,也有利于新人快速熟悉公司架构,降低了对业务的熟悉程度要求。
相关文章推荐
- vue 父子组件声明周期的执行顺序
- 基于vue的video播放组件的后续修改
- 基于Vue封装分页组件
- 基于Vue中点击组件外关闭组件的实现方法
- 基于vue-strap的轮播组件,下载即用
- 初探 amaze-vue( 基于vue.js封装的Amaze UI 组件库)
- React-基于React & Reflux 的评论框组件 (ES6)
- 饿了么 基于vue的组件
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
- 基于jQuery实现的美观星级评论打分组件代码
- 基于Vue开发的tab切换组件
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
- 前端架构组件化开发系列二 (基于VUE 扩展组件)
- Vue.js 学习10 Element基于Vue2.0的组件库
- 基于Vue的数字输入框组件开发
- 基于 Vue.js 的移动端组件库mint-ui
- VUX v2.1.1-rc.12 发布,基于 WeUI 的 Vue 移动端组件库
- 基于vue-cli脚手架,引入各种组件,