苏中建设集团网站网址,优秀国外网站设计赏析,设计一个网页的代码,网络营销的基础与前提是什么理论Provide和Consume#xff0c;应用于与后代组件的双向数据同步#xff0c;应用于状态数据在多个层级之间传递的场景。不同于State/Link装饰器修饰的 父子组件之间通过命名参数机制传递#xff0c;Provide和Consume摆脱参数传递机制的束缚#xff0c;实现跨层级传递。 其中Pr…Provide和Consume应用于与后代组件的双向数据同步应用于状态数据在多个层级之间传递的场景。不同于State/Link装饰器修饰的 父子组件之间通过命名参数机制传递Provide和Consume摆脱参数传递机制的束缚实现跨层级传递。 其中Provide装饰的变量是在祖先节点中可以理解为被“提供”给后代的状态变量。Consume装饰的变量是在后代组件中去“消费绑定”祖先节点提供的变量。
Provide/Consume装饰的状态变量有以下特性
Provide装饰的状态变量自动对其所有后代组件可用即该变量被“provide”给他的后代组件。由此可见Provide的方便之处在于开发者不需要多次在组件之间传递变量。后代通过使用Consume去获取Provide提供的变量建立在Provide和Consume之间的双向数据同步与State/Link不同的是前者可以在多层级的父子组件之间传递。Provide和Consume可以通过相同的变量名或者相同的变量别名绑定变量类型必须相同。
Provide和Consume通过相同的变量名或者相同的变量别名绑定时Provide修饰的变量和Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内包括其子组件中声明多个同名或者同别名的Provide装饰的变量。 例如:
Entry
Component
struct ProvideAndConsume {// State message: string 我是父组件Provide(change) message: string 我是父组件build() {Row() {Column() {Text(this.message).ProvideAndConsumeSty(,(){this.message 我是父组件变化后的值})Divider()// 调用子组件ProvideAndConsumeSon()}.width(100%)}.height(100%)}
}
Component
struct ProvideAndConsumeSon{build(){Column(){Text(我是儿子组件).ProvideAndConsumeSty(Color.Orange)Divider()// 调用孙子组件ProvideAndConsumeSun()}}
}
Component
struct ProvideAndConsumeSun{Consume change: string //数据不能初始化 类型要与绑定的Provide的类型一致build(){Column(){Text(我是孙子组件:this.change).ProvideAndConsumeSty(Color.Red,(){this.change 我是孙子组件变化后的值})}}
}
Extend(Text) function ProvideAndConsumeSty(color?: string|Color,click?:()void){.fontSize(30).fontWeight(FontWeight.Bold).fontColor(color).margin({top:15,bottom:15}).onClick(() {click()})
}下图是代码运行的效果 然后点击我是父组件文字 然后点击孙子组件文字
