[HarmonyOS]大概说一下鸿蒙组件通信如何实现?有几种方式?

父传子通信:

单向(无装饰器直接传):

这种方式较为简单直接,父组件可以直接将数据传递给子组件,子组件能够接收该数据。

然而,其局限性在于子组件虽然能接收数据,单不能对接收的数据精选更新操作,数据在子组件按中是只读的。

单向(通过@Prop接受):

当父组件的数据是通过@state 装饰过的数据时,课采用这个方式进行父传子通信。

此时,符组件数据一旦更新,子组件能够接收到相应的更新内容,实现了数据从父组件到子组件的单向传递及同步更新。

双向(通过@Link装饰):

要求父组件必须是响应式的数据,比如经过@State装饰的数据。

在这种方式下,不仅父组件数据更新时子组件能接收到,而且子组件修改数据后,父组件也能同步更新,实现了父子组件间数据的双向交互通信。

双向(@Provide/@Consume)

这组装饰器同样可用于父传子通信,不过它更多地体现出优势是在跨层级通信场景中。

在父传子的情境下,通过@Provide在父组件定义数据,子组件使用@Consume来获取并可对数据进行修改,修改后的数据能反馈给父组件,实现双向通信。

子传父通信

传回调函数:

子组件首先定义一个函数类型,然后父组件将一个函数传递给子组件。

子组件在内部调用这个从父组件传来的函数,并通过该回调函数把需要传递给父组件的参数传递过去,从而实现子组件向父组件的数据传递。

双向(Link):

与父传子通过@Link实现双向通信类似,在子传父场景下,同样可以利用@Link装饰的数据极致,使得子组件修改数据时,父组件能够接收到更新,反之亦然,事项双向的数据交互。

双向(@Provide/@Consume):

这组装饰器在子传父通信中也发挥作用。子组件通过@Provide定义数据(或对已有数据进行相关设置),父组件使用@Consume 来获取该数据,当子组件数据有变化时,父组件能感知并更新,反之亦然,达成双向通信效果。

全局(emitter):

无论是父传子还是子传父,都可以通过定义事件并触发该事件来实现数据传递。

它数据线程通讯方式,具有很强的通用性,能够实现跨组件,跨页面的通讯,不受组件层级和页面限制,只要在合适的时机触发相应事件,就可以完成数据的传递。

跨层级通信

双向(@Provide/@Consume)

这组装饰器主要用于跨层级的通信场景。在根组件或者某一层级较高的组件通过 @Provide 定义数据,其他不同层级的子组件(可以是多层嵌套的子组件)都可以通过 @Consume 来获取该数据。

并且,当任何一个使用 @Consume 获取数据的组件对数据进行修改时,通过这种机制,数据的变化能够在相关组件间进行传递和同步更新,实现跨层级的双向通信。

全局(emitter)

同样借助于定义事件和触发事件的方式,实现跨层级的通信。不管组件之间相隔多少层级,只要在需要传递数据的组件中定义好事件并在合适的时机触发,就可以将数据传递给其他层级的组件,实现跨层级的数据交互。

全局(AppStroage / LocalStroage)

可以利用应用级别的存储(AppStroage)或本地存储(LocalStroage)来实现跨层级通信。

例如,一个组件将数据存储到 AppStroage 或 LocalStroage 中,其他跨层级的组件可以从这些存储中获取数据,从而实现数据在不同层级组件间的传递。当然,如果有组件对存储中的数据进行了修改,其他相关组件再次获取时就能得到更新后的数据。

跨页面通信

router 路由(router.pushUrl ({params: id}))

通过 router 路由机制,在进行页面跳转时,可以将参数(如 id)作为路由参数传递给目标页面,实现跨页面的数据传递。

目标页面在加载时可以获取到这些路由参数,从而根据参数进行相应的操作或展示相关内容。

Navigation 路由(NavPageStack.pushPath ({params: id}))

这是另一种基于 Navigation 路由的跨页面通信方式。通过 NavPageStack.pushPath 方法,将参数(如 id)作为路径参数传递给目标页面。

同样,目标页面在加载时能够获取到这些参数,并据此进行后续的操作。

Navigation 路由(@Provide 定义到根组件,子页面都能通过 @Consume 访问)

在根组件通过 @Provide 定义数据,当进行页面跳转后,子页面都可以通过 @Consume 来获取该数据,实现跨页面的数据传递和共享。

这种方式在页面层级关系较为复杂的情况下,能够方便地实现数据在不同页面间的传递和同步更新。

全局(emitter)

如同在其他通信场景中一样,通过定义事件和触发事件的方式,实现跨页面的通信。

可以在一个页面定义事件并触发,其他页面通过监听该事件来获取相关数据,从而实现跨页面的数据传递和交互。

​​​​​​​全局(AppStroage):

利用应用级别的存储 AppStroage 来实现跨页面通信。一个页面将数据存储到 AppStroage 中,其他页面可以从 AppStroage 中获取数据,实现数据在不同页面间的传递。

当有页面对存储中的数据进行修改时,其他页面再次获取时就能得到更新后的数据。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郝晨妤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值