鸿蒙：@prop @link数据传输原理

S妖O风F

已于 2024-07-01 10:29:33 修改

阅读量293

点赞数 2

CC 4.0 BY-SA版权

文章标签：鸿蒙

于 2024-07-01 10:27:50 首次发布

本文链接：https://blog.youkuaiyun.com/SOOOOOF/article/details/140093968

@prop传递数据属于单向传递，父组件修改数据子组件能感知，子组件修改数据父组件不能感知，注意被@prop修饰的子组件数据变量不能初始化。

@link传递数据是属于双向传递，父组件修改数据子组件能感知，子组件修改数据父组件也能感知，注意被@link修饰的子组件数据变量不能初始化，且父组件传递的是引用，需要用$表示引用数据如：

总结：如何子组件不对数据对渲染用@prop ,如果子组件需要对数据进行渲染用@link

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

S妖O风F

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Arkts@Watch装饰器与内置组件双向同步深度讲解与实战应用

一键难忘的博客

11-30

1338

Arkts@Watch装饰器与内置组件双向同步深度讲解与实战应用【鸿蒙专栏-14】 Watch 装饰器和 $$ 运算符是 ArkTS 框架中强大的状态管理工具，通过它们的灵活运用，我们能够更好地处理组件状态的变化和同步。在实际应用中，我们建议开发者根据具体场景灵活选择使用，并结合最佳实践，以提高应用的性能和可维护性。ArkTS 的状态管理机制为开发者提供了丰富的选择，使得构建复杂应用变得更加简便与高效。ArkTS 的 @Watch 装饰器和 “$$” 运算符为开发者提供了更多灵活性和控制权。

鸿蒙HarmonyOS应用开发-装饰器总结

weixin_48952056的博客

05-18

1369

在鸿蒙应用开发中常用的状态管理技术，包括 @Prop、@Link、@Provide、@Observed 和 @ObjectLink 装饰器。通过介绍每种装饰器的特点、限制条件和常见问题，读者可以更好地了解如何有效地管理应用的状态数据，提升应用的可维护性和稳定性。

参与评论您还未登录，请先登录后发表或查看评论

【鸿蒙实战开发】HarmonyOS-ArkUI教程@link装饰器双向数据传递的使用

HarmonyOS_001的博客

06-19

1174

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。

鸿蒙开发笔记-@Link父子双向同步传递数据

2301_79082288的博客

08-24

378

将父组件的状态属性传递给子组件；子组件变量通过 @Link 修饰即可；

鸿蒙HarmonyOS 5.0开发：$$语法：内置组件双向同步

m0_73088370的博客

12-11

509

$$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步。

状态管理中@Link和$$的区别

bright789的博客

09-03

522

大家都知道，父@State与子@Link，这样搭配是可以实现父数据变化，子组件的相应变量也会更新，子组件的变量变化了，父组件的也相应的变量，俗称“双向绑定”(Two-way binding)，但我发现一个问题，拥有此功能的还有一个$$，这就让我产生了疑问，它们两们有什么区别？当TextInput使用$$时，使用输入法改变TextInput的值，cusername也会改变，cusername变时，也会同步给TextInput,实现了双向绑定。Text(`子组件用户名:${this.cusername}`)

鸿蒙开发之状态管理@Prop和@Link

Lu_Ca的博客

12-12

2949

如果想要父组件与孙子组件中的数据达到双向同步，那么就需要先父组件与子组件绑定，然后子组件与孙子组件绑定，需要绑定多次。StaticList组件因为可以对数据进行完成、删除等操作，也会对父组件的数据改变，所以采用双向同步的@Link装饰。在父组件中用@Provide装饰，在孙子组件中采用@Consume装饰，就可以实现双向数据同步。@Prop的数据是单向传递的，父组件改变能通知子组件，但是子组件改变不能通知父组件。@Link的数据是双向传递的，父组件改变能通知子组件，子组件的改变也可以通知父组件。

【中工开发者】Harmony Os中不同类型和不同层次组件和页面之间的数据传输方式

weixin_73843101的博客

12-06

934

在HarmonyOS中，ArkUI框架提供了多种数据传递方式，以实现不同层级和不同类型组件间的数据交互。旨在详细阐述鸿蒙OS中不同层级和不同类型组件间的数据传递方式，包括父子组件、爷孙组件、兄弟组件以及不同页面组件间的数据传递。

鸿蒙个人健康App设计与实现 1 结合选题需求设计合理的项目结构，模块划分清晰。 2 界面设计，至少完成5个界面设计(如首页，注册/登录页、列表页、详情页、个人中心)，色彩搭配协调，布局合理。 3 灵活使用各种组件间的状态管理和应用级的状态管理，如@Prop @Link @AppStorage 等。 4 需要实现网络访问，可搭建本地服务器或者云端服务器，使用http模块或者axios三方插件。 5 灵活使用各种数据持久化技术，用户首选项，键值数据库，关系型数据库，存储于设备即可。

04-28

利用HarmonyOS提供的布局控件构建清晰易懂的操作流程。 #### 示例：登录注册页面布局 ```html 请输入用户名"/> 请输入密码"/> <button @click="handleLogin">登录还没有账号？去注册</a></span> ....

鸿蒙开发笔记-10-其他状态管理：@Watch装饰器，$$语法，@Track装饰器

o118abcdef的博客

03-11

1609

Watch 适用于需要即时响应的状态变化场景，如按钮点击、输入框输入等交互操作，使用原则：回调函数保持纯粹（无副作用）避免深度嵌套监听（超过 3 层需重构）使用debounce处理高频事件（如输入框）@Track 推荐用于管理包含多个属性的复杂对象，特别是在频繁更新且需要优化渲染性能的场景，使用原则：所有 UI 可见属性必须标记@Track非 UI 属性禁止使用@Track复杂对象采用扁平化设计（如@Track单独字段）“$$”语法优化：预计算复杂表达式使用。

ArkTS 状态管理@Prop、@Link

a_strong_pig的博客

12-19

1570

ArkTS中@Prop、@Link、@Provide、@Consume装饰器的使用

鸿蒙应用开发——ArkTS 组件状态管理（一）@State、@Prop、@Link、@Provide和@Consume、@Watch的使用详细教程含示例代码

m0_73950008的博客

06-04

2544

父组件通过 @State修饰符定义变量，子组件通过。

HarmonyOS4.0系列——05、状态管理之@Prop、@Link、@Provide、@Consume，以及@Watch装饰器

NanChen的博客

01-10

2058

看下面这张图Components部分的装饰器为组件级别的状态管理，部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink 实现应用和组件状态的双向同步，通过@StorageProp/@LocalStorageProp 实现应用和组件状态的单向同步。

HarmonyOS_Next 鸿蒙组件-数据双向绑定

Ja_dream的博客

07-17

2522

笔者是做前端的，在学习鸿蒙的时候，一直好奇能不能像vue一样，做到数据双向绑定，实现像vue的MvvM一样，数据和视图双向同步。即实现：数据变化-视图更新，视图更新-数据更新数据绑定可分为单向数据绑定和双向数据绑定。指的是对象实例的数据更新会引起界面元素的更新，反之不行；指的是对象实例的数据更新会引起界面元素的数据更新，界面元素的数据更新也会引起对象实例的数据更新。因为像这种通过事件来同步数据的办法，太繁琐了然后就在官方文档中，找到了这个。

鸿蒙开发-ArkTS 语言（一）

m0_73838866的博客

02-22

1851

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。

@Prop和@Link的区别

weixin_50236973的博客

09-03

196

@Prop和@Link的区别

prop传递数据

parkwoojin1102的博客

04-02

2777

prop 是组件之间的通信方式，prop属性是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件 props可以通过数组指定需要哪些属性。但在vue.js内部，数组格式的props会被格式化成为对象格式 HTML特性是不区分大小写。所以会使用camelize函数将props名称驼峰化，即将a-b这样的名称转换成aB 父组件中 <child user-name="berwim"></child> 子组件中props选项中需要使用userName pr

工具变量-5G示范城市DID（2014-2025）.xlsx

最新发布

07-31

详细介绍及样例数据：https://blog.youkuaiyun.com/T0620514/article/details/149811741

鸿蒙中mvvm各层的数据传输,mvvm,mvc,mvp的区别？

07-11

### 三级标题：MVVM 架构在鸿蒙系统中的数据传输机制在 MVVM（Model-View-ViewModel）架构中，View 层与 ViewModel 层通过双向绑定进行通信。这种绑定机制使得 View 中的数据变化可以自动同步到 ViewModel，同时 ViewModel 的数据更新也会反映到 View 上。在鸿蒙开发中，这种机制通过装饰器如 `@State`、`@Prop` 和 `@Link` 等实现数据驱动的 UI 更新 [^2]。例如，在一个简单的列表展示场景中，ViewModel 负责从 Model 获取数据并将其转换为 View 可以直接使用的格式。当用户点击某个列表项时，事件会传递给 ViewModel，由它处理逻辑，并可能触发 Model 数据的更新。随后，ViewModel 的状态变更会通过数据绑定自动反映到 View 上，从而实现高效的 UI 响应 [^3]。以下是一个使用 `@State` 实现数据绑定的示例： ```typescript @Component struct MyComponent { @State message: string = "Hello, MVVM!" build() { Column() { Text(this.message) .fontSize(30) .onClick(() => { this.message = "Data Updated!" }) } .width('100%') .height('100%') } } ``` 在这个例子中，`message` 是一个被 `@State` 装饰的状态变量，当其值发生变化时，UI 会自动刷新以显示新的内容 [^2]。 --- ### 三级标题：MVVM、MVC 和 MVP 架构的区别 #### MVC（Model-View-Controller） MVC 将应用程序划分为三层：Model（数据模型）、View（视图）和 Controller（控制器）。Model 负责管理数据和业务逻辑；View 负责显示界面；Controller 接收用户的输入，协调 Model 和 View 之间的交互。MVC 的优点在于结构清晰，但缺点是数据流较为复杂且不够统一，容易导致维护上的困难 [^1]。 #### MVP（Model-View-Presenter） MVP 是 MVC 的一种变体，Presenter 替代了 Controller，作为 View 和 Model 之间的中介。Presenter 负责处理所有的业务逻辑，并将结果返回给 View 显示。这种方式减少了 View 对 Model 的直接依赖，提高了模块化程度。然而，随着业务逻辑的增加，Presenter 层可能会变得臃肿，影响代码的可维护性 [^4]。 #### MVVM（Model-View-ViewModel） MVVM 在前端开发中得到了广泛应用，它不仅解决了 View 和 Model 的耦合问题，还通过数据绑定机制简化了两者之间的映射关系。ViewModel 作为中间层，负责封装 View 所需的数据以及操作这些数据的方法。View 和 ViewModel 之间通过双向绑定实现数据同步，这显著提升了开发效率和代码的可读性 [^3]。 --- ### 三级标题：各架构模式在数据流设计上的差异在 MVC 模式中，View 直接与 Model 进行通信，Controller 主要负责接收用户输入并决定如何处理这些输入。这样的设计虽然直观，但可能导致数据流向不一致的问题 [^1]。而在 MVP 中，View 不再直接访问 Model，而是通过 Presenter 来获取所需数据。Presenter 同时持有 View 和 Model 的引用，负责协调两者的交互。这种方式确保了 View 的纯粹性，使其专注于 UI 渲染 [^4]。 MVVM 则进一步优化了数据流的设计。View 与 ViewModel 之间通过数据绑定实现自动同步，而 ViewModel 本身则负责从 Model 获取数据并进行必要的转换。这种方式不仅降低了组件间的耦合度，还极大简化了 UI 编程 [^3]。 --- ### 三级标题：总结三种架构模式各有特点： - **MVC** 强调分层设计，适合小型项目，但在大型应用中可能面临数据流混乱的问题。 - **MVP** 改进了 MVC 的结构，通过引入 Presenter 减少 View 对 Model 的依赖，适用于需要良好测试性的项目。 - **MVVM** 通过数据绑定机制极大地简化了 UI 开发流程，特别适合现代前端框架的应用场景。 ---