java开发组件化,Vue组件化开发思考

深藏阁楼爱情的钟 2022-11-12 09:53 266阅读 0赞

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

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

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

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

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

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

(废话，同一个项目 当然要

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

![ce85e3e22328a29540d52c8573699823.png][]

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

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

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

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

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

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

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

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

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

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

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

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

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

这完全是2个组件～

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

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

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

对于组件化开发

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

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

所www.cppcns.com以我理解组件化的组件是应该泛指是 高内聚低耦合(某phper讲给www.cppcns.com我的专业名词，不知道放这用对不对哈)的编程客栈～

![71a88c37704a579d1b3941dc626936ff.png][]

本文标题: Vue组件化开发思考

本文地址: http://www.cppcns.com/ruanjian/java/219460.html

[ce85e3e22328a29540d52c8573699823.png]: /images/20221022/91d898eb247c41f983405705bc2c762c.png
[71a88c37704a579d1b3941dc626936ff.png]: /images/20221022/d0882e3e2c0649f3a9894731bdb00327.png

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 组件化开发

文章目录前言组件化开发底部菜单 TabMenu 父子组件相互传数据父传子：自定义属性子传父：自定义事件

待我称王封你为后i/ 2023年10月13日 09:50/ 0 赞/ 68 阅读

相关 Vue 组件化开发

Vue 组件化开发什么叫做组件化实例什么叫做组件化所谓组件化，就是把页面拆分成多个组件然后可重复利用，每个组件依赖的 CSS、JS、模板、图片

比眉伴天荒/ 2023年10月05日 13:22/ 0 赞/ 47 阅读

相关 Day66 Vue组件化开发

　1. json简介 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAS

矫情吗；*/ 2023年08月17日 15:29/ 0 赞/ 134 阅读

相关 vue组件化开发：调试工具、组件通信、插槽

Vue调试工具调试工具安装 > 官方文档：https://github.com/vuejs/vue-devtools 克隆仓库安装依赖包构

梦里梦外;/ 2023年03月01日 12:46/ 0 赞/ 38 阅读

相关 Vue 组件化开发

![在这里插入图片描述][20200715191621219.png] 1.1 组件化简介 1.1.1 概述将实现页面某一

怼烎@/ 2023年02月26日 12:29/ 0 赞/ 70 阅读

相关 Vue 组件化开发

目录组件的使用向组件中插入内容使用槽点使用子组件

﹏ヽ暗。殇╰゛Y/ 2023年02月17日 05:12/ 0 赞/ 5 阅读

相关 java开发组件化,Vue组件化开发思考

一般说到组件，我首先想到的是弹窗，其他就大脑空白了。因为觉得这个是在项目中最常用的功能，提取出来方便复用的才是组件～然而我才发现这个想法是有问题的。我发觉可能从意识

深藏阁楼爱情的钟/ 2022年11月12日 09:53/ 0 赞/ 267 阅读

相关 Vuejs组件化开发

组件化开发 01-组件化开发 01-组件化开发的基本使用 02-全局组件和局部组件 03-父组件和子组件 04

Myth丶恋晨/ 2022年10月29日 07:44/ 0 赞/ 277 阅读

相关 VUE.JS 组件化开发实践

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 前言公司目前制作一个H5活动，特别是有一定统

r囧r小猫/ 2022年03月26日 02:40/ 0 赞/ 358 阅读

相关 Vue.js 组件化开发

三、组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件

悠悠/ 2021年09月07日 10:16/ 0 赞/ 428 阅读