鸿蒙UI开发快速入门 —— part08: 组件状态管理之@Provide/@Consume装饰器

1、前言

在此之前，我们已经先后学习了三个装饰器：@State、@Props、@Link，它们的功能和使用场景分别是什么？暂停回忆一下。

我们目前已经可以处理组件内状态(@State)，也可以处理父组件向子组件传递状态(@Props)，还可以处理父组件与子组件共用状态(@Link)。

我们再想一种场景：如果有一个状态，有非常多个子组件都需要共用，同时，子组件的层级可能会不止一层，此时，如果我们想做到类似的效果的话，则需要为每个层级都传递一遍@Props，这将是灾难。

为了解决多层级的状态同步问题，鸿蒙引入了 @Provide装饰器和@Consume装饰器。

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

其中@Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。

接下来我们详细了解他们。

2、@Provide装饰器和@Consume装饰器

@Provide/@Consume装饰的状态变量有以下特性：

• • @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。

  • 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。

  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。

  • @Provide和@Consume通过相同的变量名或者相同的变量别名绑定时ÿ