Vue组件化开发思考

一般说到组件，我首先想到的是弹窗，其他就大脑空白了。

因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件～

然而我才发现这个想法是有问题的。

我发觉可能从意识上把Vue的组件和UI库的组件（弹窗之类的）混淆了。。。

缘起于最近的一个表单开发，页面上有2个是联动菜单的选项。

首先想到的是，这个样式和选择地址的那个联动菜单，完全一样哈～

（废话，同一个项目 当然要保持ui风格的相同啊！）

不过差别在于 我这个是 一个1级 一个2级， 地址那个是4级的.

然后我就想着把那个地址的组件引进来用，发现这是个写死4级的

这个时候我只想到2种办法

1，分别改写成1级选项和2级选项的2个组件（好像比较low）

2，引用4级联动组件，改写成可选1级选项或2级选项（有点麻烦，到时候还要测地址没被我改坏）

3，重写一个可以通用无限联动菜单（方便可选级的）

最后选了3，自己重新搞了个。

至于为什么没有整合2，主要考虑到这两个组件所处的业务页面不同逻辑也有些差异：

1获取列表的逻辑可能不同，是一次性获取4级还是每次只获取1级或2级，

这个不确定的话，做成通用组件就都要处理了

2我这个是直接弹选项的，地址那个是跳新页面再点击弹选项的

我这个可以父子组件传递数据，地址那个用了vuex（非父子）

总之就是实现成本和维护成本高，复用价值没那么高。

相当于2个页面都各自有一个样式相同逻辑不同的组件。

这完全是2个组件～

复制其通用样式部分，在各自内部实现其业务逻辑。

两个组件放在不同的板块内，相互独立，方便管理和维护。

这个时候 再结合vue组件化的图来看 你会清楚

对于组件化开发

分治（自有业务逻辑）比复用（相同逻辑） 更为重要！

复杂的业务逻辑配合vuex更方便实现组件化～

所以我理解组件化的组件是应该泛指是 高内聚低耦合（某phper讲给我的专业名词，不知道放这用对不对哈）的～

您可能感兴趣的文章:

  • Vue项目组件化工程开发实践方案
  • vue 将页面公用的头部组件化的方法
  • vue+swiper实现组件化开发的实例代码
  • Vue-router 类似Vuex实现组件化开发的示例
  • 在Vue组件化中利用axios处理ajax请求的使用方法
  • Vue组件化通讯的实例代码
  • 详解vue组件化开发-vuex状态管理库
  • 详解vue.js组件化开发实践
  • webpack+vue.js实现组件化详解
赞 (0)

相关推荐

  • vue 将页面公用的头部组件化的方法

    本文介绍了vue 将页面公用的头部组件化的方法,分享给大家,具体如下: 呃--重新捡起前面用vue-cli快速生成的项目. 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component. 别问我为啥总是写关于vue的博客,都是为了生计(------) 这是官方的文档地址(https://cn.vuejs.org/v2/guide/components.html#什么是组件?),关于组件写了一大堆,一看就知道这个很有用啦. 关于一些组件的概念之

  • 详解vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • Vue项目组件化工程开发实践方案

    Vue项目组件化工程开发实践方案

    我们暂时给提取出来的脚手架取名叫vde-cli,通过vde-cli脚手架生成的组件库工程目录结构如下: 核心功能 组件库 工程的packages文件夹就是用来存放组件库里面的各种组件了,这里不需要通过手动创建文件的方式创建组件,直接通过一条创建组件的命令完成.每个组件都有一个单独的组件文件夹,组件文件夹下都至少包含"index.vue","example.vue","readme.md"这三个文件,这几个文件都是通过创建组件传递的参数加指定的模板

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • Vue-router 类似Vuex实现组件化开发的示例

    本文介绍了Vue-router 类似Vuex实现组件化开发的示例,分享给大家,具体如下: 随着项目越来越大,把所有route写在一个文件里就显得杂乱. #单个组件路由 import a from '../components/a' export default { path: '/a', name: 'a', component: a } import arouter from 'xxx' export default new Router({ routes: [ arouter ] }) #多

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • Vue组件化通讯的实例代码

    1. Vue的组成文件(.vue) 分为三部分,分别对应html,js,css <template></template> <script></script> <style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前 created() 创建数据 我们在这里的得到我们在data里面创建的数据 beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 bef

  • Vue组件化开发思考

    Vue组件化开发思考

    一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目 当然要保持ui风格的相同啊!) 不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来

  • Vue组件化开发之通用型弹出框的实现

    本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢. 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化的思想就显得尤为重要.这里通过设计一个简单的弹出框,给小伙伴们分享组件化的应用. 组件&组件化 组件化是对某些可以进行复用的功能进行封装的标准化工作.组件一般会内含自身的内部UI元素.样式和JS逻辑代码,它可以很方便的在应用的任何地方进

  • Vue组件化开发的必备技能之组件递归

    Vue组件化开发的必备技能之组件递归

    目录 前言 效果展示 渲染完整数据 效果如下 获取节点数据 效果如下 动态展开收起 效果如下 完整代码 效果如下 总结 前言 不知道大家有没遇到过这样的场景:渲染列表数据的时候,列表的子项还是列表.如果层级少尚且可以用几个for循环搞定,但是层级多或者层级不确定就有点无从下手了. 其实这就是树形结构数据,像常见的组织架构图,文件夹目录,导航菜单等都属于这种结构.很多组件库都带有树形组件,但往往样式不是我们想要的,改起来也非常的费劲.那么,如何自己渲染这些数据呢?答案就是——组件递归! 效果展示

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • Vue下拉菜单组件化开发详解

    Vue下拉菜单组件化开发详解

    本文实例为大家分享了Vue下拉菜单组件化开发的具体代码,供大家参考,具体内容如下 搞一个自定义组件,只是一个很简单的下拉菜单,也就是一个思路,整起 第一步:在项目中专门创建一个放置自定义组件的文件夹(直接components底下的common中) dropdown.vue 为一级盒子 dropdownMenu.vue 为二级盒子 dropdownItem.vue 为二级盒子内容 第二步 : 对dropdown.vue的操作 <template> <div class="box&

  • 测试平台开发vue组件化重构前端代码

    测试平台开发vue组件化重构前端代码

    目录 基于 springboot+vue 的测试平台开发 一.为什么重构 二.如何拆分 1. 补充对应知识 2. 合理拆分 三.关于项目 基于 springboot+vue 的测试平台开发 继续更新(人在魔都 T_T). 这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点. 目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下. 一.为什么重构 目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题.

  • vue组件从开发到发布的实现步骤

    vue组件从开发到发布的实现步骤

    本文介绍了vue组件从开发到发布的实现步骤,分享给大家,具体如下: 组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程师,当不了合格的搬运工 .让我们来了解一下vue组件从开发到打包发布流程,并配置Github主页. 本文以 vue-clock2 组件为例,欢迎star _~~ 项目地址 目标框架:vue 打包工具:webpack 发布源:npm

  • Vue组件化常用方法之组件传值与通信

    相关知识点 父组件传值到子组件 子组件传值到父组件 兄弟组件之间传值 祖代和后代之间传值 任意两个组件之间传值 父组件传值到子组件 父组件传值到子组件基本方法有三个,分别为: 属性 props 引用 $refs 子元素 $children 日常开发中,我们用到 props 和 $refs 频率比较多,$children 相对较少些(我就没怎么使用过~). 属性 props 在父组件中添加属性,在子组件中接收使用,例如: 父组件: <HelloWorld msg="Welcome to Yo

随机推荐