UI组件：父子组件渲染的同步、不同步设计

最新推荐文章于 2025-03-17 14:55:15 发布
最新推荐文章于 2025-03-17 14:55:15 发布
阅读量780 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 思想精髓集萃
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tiangej/article/details/18039609
本文探讨了UI组件中父组件与子组件之间的状态同步机制，分析了不同情况下子组件如何感知父组件属性变化并作出响应，包括属性变化、状态变化及换肤等情况。

UI组件不可避免的出现嵌套关系，也就是父组件和子组件的关系。

UI组件的使用者仅对父组件露出的公开属性进行设定，而不能直接对子组件进行设定。

而父组件的某些属性改变了组件的整体状态，不单是父组件需要对状态进行改变（通常是外观、皮肤的变化），子组件也要相应作出反应。

子组件是如何感知父组件属性的变化，从而改变状态的呢？

 

>>触发外观渲染的因素

                            父子同步渲染             备注

1. 尺寸变化                否                        因为子组件的尺寸是父组件在渲染时计算得出的，子组件只能在下一次渲染期间才能进行响应，

                                                              因此有延迟。可以考虑用图片模拟子组件短时间的尺寸变化。

2. 属性变化                是

3   状态变化               是

4.  换肤                      是

OpenHarmony父子组件双项同步使用：@Link装饰器
maniuT的博客
06-01 856
Link装饰的变量与其父组件中的数据源共享相同的值。
鸿蒙页面级变量的状态管理【@Prop装饰器：父子单向同步】
2401_82772199的博客
07-29 1042
Prop变量允许在本地修改，但修改后的变化不会同步回父组件。当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。更多鸿蒙最新技术知识点，请关注作者博客：https://gitee.com/li-shizhen-skin/zhihu/blob/master/README.md。
小程序 数据渲染不同步的问题
weixin_30667649的博客
04-13 1212
想要数据立马生效，必须要调用一下setData()方法，其他任何一种赋值方法都无法实现实时渲染 转载于:https://www.cnblogs.com/05410n/p/8813808.html
vue 中数据没有同步渲染的解决方法
mhx123456789的博客
04-21 292
vue 中数据没有同步渲染的解决方法
如何把组件渲染到页面上
王依米
10-02 2813
  首先编好组件 GoodsList.vue ,然后在ruoter/index.js里引入 import GoodsList from './../views/GoodsList'以及在routes里声明这个组件 export default new Router({ routes: [ { path: '/', name: 'GoodsList...
vue父子组件 渲染过程，超详细
飞翔的熊blabla
05-11 6437
这里vue的子组件引入有两中方式：同步和异步，因此父子组件加载的顺序 是不一样的，接着往下看，会有收获的。 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) image.png 同步引入时生
鸿蒙开发0基础【@Link装饰器：父子双向同步】ui组件
最新发布
zhenggaoxiao232的博客
03-17 639
子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
鸿蒙开发0基础【@Prop装饰器：父子单向同步】ui组件
zhenggaoxiao232的博客
03-17 938
@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的，但是变化不会同步回其父组件。
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
weixin_39603327的博客
12-19 1441
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted更新过程父beforeUpdate->子beforeUpdate->子updated->父updated销毁过程父beforeDestr...
鸿蒙开发（10）状态管理 @Link装饰器：父子双向同步
weixin_45299895的博客
12-16 1016
Link装饰的变量与其父组件中的数据源共享相同的值。
OpenHarmony父子组件单项同步使用：@Prop装饰器
鸿蒙开发知识记录
09-03 767
Prop装饰的变量和父组件建立单向的同步关系：● @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。● 当数据源更改时，@Prop装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。
VueJS父子组件属性同步
01-02 1257
VueJS父子组件属性同步 背景 为了解决ElementUI中Dialog+Form同时用于添加、修改操作时，Form中输入项值及检验状态滞留（显示的是上一次关闭Dialog前的值）的问题。 在父组件中对Table行数据进行添加、修改操作，使用了ElementUI的Dialog组件，添加、修改操作使用同一Dialog表单。那么问题来了，点击添加按钮时，对话框表单输入项初始化状态都应置空；点击修改按...
vue 子组件调用父组件方法
Bloxed_shangyc的博客
02-01 5813
父组件vue privateScoreTop :msg ="Widget" v-on:listenTochildEvent="showMessageFromChild"> privateScoreTop> 父组件js export default{ data(){ return { } }, computed:{ p
Chart： 计算X轴标签个数
tiangej的专栏
09-08 4455
在图表中，横轴通常表示分类，纵轴表示数值。 纵轴的数值标签表示，是需要算法支持的，参见【图表轴刻度的思路，算法： 转载X】，略过。 这里说说横轴（X轴）的标签。   用K线图做例子，在一个图中表示的蜡烛线非常多，每根线对应一个时间，这些时间就是X轴上要表示的标签。 如果每根线的时间都在X轴表示出来，由于数量太多，就会相互重叠，根本分不清彼此，上面的文字让看不出来。 因此就要减少其数量。
Label标签设计： 省略号表示功能（用【...】代替过长的看不见的部分）
tiangej的专栏
12-30 4021
Label标签设计思路： 只有格式单一时才有省略表示功能（用【...】代替过长的看不见的部分）   理由： 当作者事先已知表示的文字是什么，有多少文字数的时候，可对Textfield中表示的文字设置局部的Textformat。这样能够展现具有风格的特殊的文字排版效果。显然，Textfeild的显示空间要足够大，才不至于遮掩住作者的“精妙设计”。让一部分文字不能显示，显然有违作者初衷。因此，此
动画的帧频设定和人眼生理特关系中的简单数学
tiangej的专栏
12-03 3759
人眼生理特性：视觉暂留（ 0.1~0.4秒），小于0.1秒的外观变化对于人眼来说就是连续的动画。 如果相邻两帧的变化时间小于0.1秒，那么该帧动画对于人眼来说就是连续的。 “相邻两帧的变化时间小于0.1秒”意味着帧频是多少呢？ 1秒除以0.1秒/帧 = 10。也就是说帧频为10的动画对于人眼来说基本上就是“连续的”。 而Flashplayer默认的帧频是24。 可以知道在默认帧频
TextField中的属性：text 与 htmlText
tiangej的专栏
12-31 2963
TextField用两种类似的属性展现文字：一类是text、textFormart的组合（略称为A），另一类是htmlText（略称为B）   A能够实现的功能B都能实现。 两者是互斥的，B的优先级高。 如果设定了B，则忽略A。   使用时，根据不同的场合在AB中进行选择。
AS的UI组件架构设计
tiangej的专栏
12-03 2623
Flashplayer拥有独特的帧模型（可变跑道模型）和内部时间片的划分机制。 提供给开发者的编程接口就是ENTER_FRAME事件和RENDER事件。 ENTER_FRAME事件代表播放头进入该帧，标志着该帧开始。 RENDER事件是Flashplayer进行实质的屏幕更新前发出的事件，开发者可以监听该事件，在屏幕渲染前做最后一件事。该事件可以理解为该帧即将结束，下一帧即将开始
React与Redux实践入门：构建交互式UI组件
将回调函数作为props传递给子组件是一种常见的做法，它可以允许子组件调用父组件中的函数，从而实现父子组件之间的通信。 ### 知识点三：React应用的状态管理 随着应用的复杂性增加，需要更合理地管理应用状态。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值