HarmonyOS 父子组件数据通信(Prop与Link)

我们可以先写一个这样的小案例

typescript 复制代码
@Entry
@Component
struct Index {

  @State name:string = "小猫猫";

  build() {
    Row() {
      Column() {
        Text(this.name)
        Button("改个name").onClick(() => {
          this.name = this.name == "小猫猫"?"小狗狗":"小猫猫";
        })
        son()
        son({const: this.name })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct son {
  const:string = "你好"
  build() {
    Row() {
      Column() {
        Text(this.const)
      }
    }
  }
}

这里 我们定义了一个子组件 son 里面写了一个变量 const 字符串类型 默认值为"你好"

然后 用Text文本组件展示内容

然后 我们父组件调用子组件 一个传入了const 一个没传

运行结果如下

然后 我们点击父组件的button name是会发生改变的 从小猫猫变成小狗狗

我们点击按钮

但是 我们明显发现 我们传给子组件的 const 没有因为父组件的name改变而改变

我们可以给他加一个注解

将代码改成这样

typescript 复制代码
@Entry
@Component
struct Index {

  @State name:string = "小猫猫";

  build() {
    Row() {
      Column() {
        Text(this.name)
        Button("改个name").onClick(() => {
          this.name = this.name == "小猫猫"?"小狗狗":"小猫猫";
        })
        son({const: this.name })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct son {
  @Prop const:string
  build() {
    Row() {
      Column() {
        Text(this.const)
      }
    }
  }
}

这里 我们给子组件的 const 修饰上 Prop

首先需要强调 Prop 修饰的变量不能有默认值 你写了默认值会报错 必须从父组件传进来

此时 我们点击button按钮 Prop 修饰的变量会根据父组件的传递内容变化而变化

但这种传递是单向的 我们修改子组件的 const 父组件不会受影响 而且不要在子组件中乱动父组件传的值 你在子组件改父组件传的东西 是有问题的

然后 我们还有一种数据修饰 link

我们将代码改成这样

typescript 复制代码
@Entry
@Component
struct Index {

  @State name:string = "小猫猫";

  build() {
    Row() {
      Column() {
        Text(this.name)
        Button("改个name").onClick(() => {
          this.name = this.name == "小猫猫"?"小狗狗":"小猫猫";
        })
        son({const: $name })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
struct son {
  @Link const:string
  build() {
    Row() {
      Column() {
        Text(this.const)
        Button("改个name").onClick(() => {
          this.const = "小海豚";
        })
      }
    }
  }
}

这里 我们子组件的const变量注释换成 Link 它和Prop一样 放上去 变量就不能有默认值

然后 我们父组件传值是 如果 你是 this.变量名是会报错的

Link修饰的变量 只需要 $后面放一个组件变量就够了

然后 点击子组件button 就会修改link修饰的数据

也可以简单理解为

Prop 子集不能修改数据 父级改了 子集会响应

Link 子集和父级都可以修改数据 且双方都会响应

相关推荐
请叫我小蜜蜂同学2 小时前
【鸿蒙】鸿蒙操作系统发展综述
华为·harmonyos
HMS Core3 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
华为·harmonyos
二二孚日4 小时前
自用华为ICT云赛道AI第一章知识点-机器学习概览
人工智能·华为
我科绝伦(Huanhuan Zhou)5 小时前
华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”(无法挂载或访问),但挂载点目录仍在且无数据
运维·服务器·华为
塞尔维亚大汉6 小时前
鸿蒙内核源码分析(文件句柄篇) | 你为什么叫句柄?
源码·harmonyos
别说我什么都不会6 小时前
【OpenHarmony】鸿蒙开发之FlexSearch
harmonyos
HarmonyOS小助手8 小时前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
刘阿宾8 小时前
【华为昇腾|CUDA】服务器A6000显卡部署LLM实战记录
服务器·华为·语言模型·gpu算力·kylin
HarmonyOS_SDK10 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
harmonyos
别说我什么都不会10 小时前
【OpenHarmony】鸿蒙开发之epublib
harmonyos