八、后代组件数据双向Provide和Consume

祖宗组件向后代组件传递数据并实现数据的双向绑定，即：祖宗组件的数据改变则后代组件的数据也跟着变化，后代组件数据变化则祖宗组件的数据也跟着变化。

这里需要在祖宗中使用@Provide装饰器，后代组件需要使用@Consume装饰器

以下代码说明了两点注意：

1.祖宗组件使用@Provide，孙组件使用@Consume

2. 祖宗组件变量名和后代组件变量名、类型保持一致，后代变量不需要初始化赋值

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * 逐级调用组件 父->子->孙
 * 现在想要从父组件直接传递给孙组件数据应该怎么办呢
 * 在父组件使用@Privode（提供的含义），孙组件使用@Consume（订阅的含义），父和孙的变量名称、类型保持一样，孙变量不需要初始值。
 */
@Entry
@Component
struct PrivodeConsume {
  @Provide wechat: string = '微信公众号'

  build() {
    Row() {
      Column({space:20}) {
        Text(this.wechat).ProvideConsume_testStyle()
          .onClick(() => {
              this.wechat='不多讲故事'
          })
        Divider()
        // 父掉子
        ProvideConsume_son()
      }
      .width('100%')
    }
    .height('100%')
  }
}
//子组件
@Component
struct ProvideConsume_son{
  build() {
    Column({space:20}) {
      Text('子组件的布局内容：').ProvideConsume_testStyle()
      Divider()
      // 调用孙组件
      PrivateConsume_sun()
    }
  }
}

//孙组件(后代组件)
@Component
struct PrivateConsume_sun{
  @Consume wechat: string
  build() {
    Column() {
      Text('孙：' + this.wechat).ProvideConsume_testStyle()
        .onClick(() => {
          this.wechat='HarmonyOS4.0'
        })
    }
  }
}




@Extend(Text) function ProvideConsume_testStyle() {
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
}

如果后代组件中的变量名称和祖宗组件的变量名不保持一致应该怎么办？

可以通过起别名的方式

@Provide('theshy')  <------>@Consume('theshy')    别名必须保持一致

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 * 逐级调用组件 父->子->孙
 * 现在想要从父组件直接传递给孙组件数据应该怎么办呢
 * 在父组件使用@Privode（提供的含义），孙组件使用@Consume（订阅的含义），父和孙的变量名称、类型保持一样，孙变量不需要初始值。
 */
@Entry
@Component
struct PrivodeConsume {
  @Provide('theshy') wechat: string = '微信公众号'

  build() {
    Row() {
      Column({space:20}) {
        Text(this.wechat).ProvideConsume_testStyle()
          .onClick(() => {
              this.wechat='不多讲故事'
          })
        Divider()
        // 父掉子
        ProvideConsume_son()
      }
      .width('100%')
    }
    .height('100%')
  }
}
//子组件
@Component
struct ProvideConsume_son{
  build() {
    Column({space:20}) {
      Text('子组件的布局内容：').ProvideConsume_testStyle()
      Divider()
      // 调用孙组件
      PrivateConsume_sun()
    }
  }
}

//孙组件(后代组件)
@Component
struct PrivateConsume_sun{
  @Consume('theshy') study: string
  build() {
    Column() {
      Text('孙：' + this.study).ProvideConsume_testStyle()
        .onClick(() => {
          this.study='HarmonyOS4.0'
        })
    }
  }
}


@Extend(Text) function ProvideConsume_testStyle() {
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
}