【鸿蒙应用开发】对导入的子组件进行数据双向传递和单向传递

双向传递

用@Provide和@Consume

如果需要对导入的子组件进行双向传递的话，provide和consume是最好的选择

首先在组件里需要提供一个变量

需要注意的是@Provide的变量和@Consume的变量需要保持名称一致，否则就需要加括号对其起别名保持一致

比如：

@Provide('test') man:string='man'//提供的变量

@Consume('test') manba:string//订阅的变量

@Consume不能初始化值

以上是对名称不一致的订阅方法代码示例

需要注意，provide和consume之间的传递是双向传递，且传递是靠名称识别的，我们调用的时候无需进行传参

下面是如何进行和子组件的双向传递：

@Provide token:string='Index'//在主组件里提供一个变量

这个是子组件：

@Component
export  default struct Show{
  @Consume token:string//订阅的变量
  
  build(){
    Row(){
      Text("导入的子组件Consume："+this.token)
      Button(){
        Text('点一下').fontSize(30)
      }.onClick(()=>{
        this.token='Consume'
      })
    }

  }
}

对于导出，我们往往需要用export default

需要注意，对于子组件切记不可加‘@Entry’，虽然这样可以进行预览，但是如果加的话会导致导入这个子组件时候预览是一片空白

然后我们在主组件里进行调用这个子组件：

import Show from '../View/Show'//首先需要导入这个子组件
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @Provide token:string='Index'//在这里提供一个变量
  build() {
    Row() {
      Column() {
        Text('主页：'+this.token)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button(){
          Text('点一下').fontSize(30)
        }.onClick(()=>{
          this.token='Provide'
        })

        Show(）//在这里调用这个子组件，需要注意的是对于provide和consume不需要往括号里传参
      }
      .width('100%')
    }
    .height('100%')
  }
}

这个时候我们点一下按钮会发现子组件的变化也会影响到主组件

单向传递

如果要进行单向传递，可以用@Prop

@State和@Prop的传递方法很简单

首先声明一个state变量

@State message:string='hello'

然后子组件里prop一个变量，这个名称无需保持一致

@Prop prop_message:string

但是需要注意，无论是@Consume还是@Prop和@Link，都不能初始化值

然后我们导出这个子组件，同样不要加@Entry

@Component
export default struct Prop_test{
    @Prop prop_message:string
    build(){
    Row(){
        Text('Prop'+this.prop_message)
        Button(){
          Text('点一下').fontSize(30)
        }.onClick(()=>{
          this.message='Prop'
        })
      }
    }
}

然后我们把这个子组件导入，在主组件里调用时候是需要进行传参的

Prop_test({prop_message:this.message})//这么调用和传参