鸿蒙单框架兄弟组件之间通信的Demo
·
- 兄弟组件之前通信:
- 方案1:状态提升,数据提升到父组件然后通过@Provide和@Consume下放。
- 方案2: 状态提升,数据提升到父组件然后通过@Link下放。
CommunicationBetweenSiblingComponents.ets
@Component
struct SiblingB {
// @Consume data: number;
@Link data: number;
build() {
Column() {
Text(`SiblingB ${this.data}`)
.onClick(() => {
this.data++;
})
}
.padding(15)
.border({ width: 5, color: Color.Orange })
}
}
@Component
struct SiblingA {
// @Consume data: number;
@Link data: number;
build() {
Column() {
Text(`SiblingA ${this.data}`)
.onClick(() => {
this.data++;
})
}
.padding(15)
.border({ width: 5, color: Color.Green })
}
}
@Entry
@Component
struct CommunicationBetweenSiblingComponents {
/**
* 兄弟组件之前通信:
* 方案1:状态提升,数据提升到父组件然后通过@Provide和@Consume下放。
* 方案2: 状态提升,数据提升到父组件然后通过@Link下放。
*/
// @Provide data: number = 0;
@State data: number = 0;
build() {
Navigation() {
Scroll() {
Column({ space: 10 }) {
Text(`父组件 ${this.data}`)
.onClick(() => {
this.data++;
})
SiblingA({
data: this.data
});
SiblingB({
data: this.data
});
}
.padding(15)
.border({ width: 5, color: Color.Red })
}
.width('100%')
.height('100%')
}
.title(' 兄弟组件之间通信')
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)
}
}

更多推荐

所有评论(0)