amtath 发表于 2023-10-17 12:19:00

meteor、lovert关于组件的理解

本帖最后由 amtath 于 2023-10-24 14:07 编辑

宝藏跟帖帖子拉出来独立成贴



活字格最新的组件的确很有意思,似乎很契合Vue中关于组件的设计思想。
其一,组件定义了小业务功能的组合封装+复用,传统意义的编程设计思路上,所谓的前后端分离,业务逻辑的组合通常是提供功能的组合的代码,由UI端进行调用,来实现复用(就是相同的功能,代码可以只写一遍)此时大家发现,虽然功能代码少了,但是相同功能的UI的部分一样还是要重复写,所以新的组件的定义思想上,组件不仅包括了可复用的逻辑代码,也包括UI的部分,即这玩意儿就是粘在一起的,一个小组件就是可以独立承担一个小小的业务逻辑功能,包括了界面和逻辑代码不可分割。你想在A页面使用它,就拖入这个组件。想在B页面使用它,同样也可以拖入这个组件,而不用重新再去画界面。
其二,如果页面内嵌入了一个组件,就必然存在外部世界要和组件交互通讯的问题。即外部要把数据传进去给组件,组件要把某些数据传出来给外部,这里VUE中的定义是Props Down,Events Up。即要外部世界通过Prop(属性)将数据传给组件,组件通过Event(事件)将数据传递出来(事件对初学者不太好理解,这里,组件需要向外传递消息的时候,将数据藏在事件的参数中,通过触发事件的方式激发事件,而外部通过不停地监听事件,一旦捕获到了某个事件,去获取里面的参数,就得到组件传递出来的消息了)。理解了这个交互逻辑,再看活字格的组件,就清楚多了。
其三,组件的嵌套。在VUE中,万物皆组件。一个组件套着一些子组件,一个子组件又是由孙组件构成,如此往复,构成了这个世界(某个应用)。活字格里,就表现为组件套组件。巧妙的利用这个原理解决了图文列表中如何嵌套图文列表的问题~不得不赞一个。设计一通百通,一下子就解开了这个困扰许久的难题






下面是lovert关于组件的简易教程
原文:https://gcdn.grapecity.com.cn/showtopic-154665-1-20.html


总结一波:组件内部我们可以理解为封装一些功能,最重要的还要理解属性和事件的用法

1. 给组件添加属性-公式,给组件添加事件-设置返回参数
2. 组件属性获取页面值
3. 组件内单元格绑定属性值达到将页面数据传入组件单元格
4. 通过组件页面加载命令设置变量的方式将组件单元格数据传入js
5. js处理数据后,通过组件触发组件事件命令将处理后的值传给事件参数
6. 页面里给组件事件添加属性命令将组件事件的参数返回到页面


amtath 发表于 2023-10-17 12:20:57

还有谢厅大佬的金句也列在一起:
父传子靠属性,子传父靠事件。
可以结合上文理解。

小侠米 发表于 2023-10-18 11:49:31

:hjyzw:

meteor 发表于 2023-10-20 17:08:30

介是被挖坟了?{:3_48:}

谢厅 发表于 2023-10-23 10:56:53

amtath 发表于 2023-10-17 12:20
还有谢厅大佬的金句也列在一起:
父传子靠属性,子传父靠事件。
可以结合上文理解。

这不是我的金句,我跟别的大佬学的

phoben 发表于 2023-10-23 18:59:31

就是我喊了几年的回调,到现在也没有啊 :'(

wwwlliu 发表于 2023-11-11 14:47:14

组件,组件,还是没学会啊!

leilei6120 发表于 2024-5-2 11:13:26

对组件的理解讲解精辟,到位,点赞!:hjyzw:
页: [1]
查看完整版本: meteor、lovert关于组件的理解