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

news/2024/7/21 9:16:21 标签: harmonyos, 华为, 鸿蒙

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

@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改变而改变

我们可以给他加一个注解
将代码改成这样

@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

我们将代码改成这样

@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 子集和父级都可以修改数据 且双方都会响应


http://www.niftyadmin.cn/n/5284885.html

相关文章

Python 数据分析 Matplotlib篇 plot设置线条样式(第2讲)

Python 数据分析 Matplotlib篇 plot设置线条样式(第2讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

反注入技术:防范非法 Call 调用的探讨

DLL 注入是一种常见的技术,用于向目标进程注入外部的动态链接库(DLL),以执行某些特定的操作。这种技术在恶意软件、游戏作弊等场景中被广泛使用,因此,研究和实施一些反注入技术对于提高应用程序的安全性是至…

date-fns v3 发布——这个由 200 个函数组成的 JavaScript 日期处理套件

date-fns v3 发布——这个由 200 个函数组成的 JavaScript 日期处理套件已经在 TypeScript 中重写,重新引入了 String 日期参数,在 Node 上支持 ESM,并且所有函数现在都可以通过命名导出导出。 经过几个月的开发,v3 终于出来了&a…

1-GAN

一、GAN简介 人脸检测、图像识别、语音识别,机器总是在现有事物的基础上做出描述或判断[参考] 能不能创造这个世界不存在的东西?GAN GAN,全称Generative Adversarial Networks,中文叫生成式对抗网络。GAN它包含三个部分&#xf…

Jekins实现自动化部署

1. Jenkins 安装启动 war包安装 下载脚本 #!/bin/bash mkdir /opt/module/jenkins cd /opt/module/jenkins wget https://get.jenkins.io/war-stable/latest/jenkins.war # 版本2.277.4启动脚本 cd /opt/module/jenkins java -jar jenkins.war --httpPort9090 #访问地址&am…

Linux怎么解压zip格式文件?

Linux解压命令zip是一种常见的文件压缩格式,用于把文件打包成一个zip文件,当我们需要共享或是发送时,能够更快速的发送,储存起来能够减少储存空间。那我们在Linux上怎么使用解压命令zip来解压zip格式文件呢?我们一起来…

利用MATLAB设计一个(2,1,7)卷积码编译码器

1、条件: 输入数字信号,可以随机产生,也可手动输入 2、要求: (1)能显示编码树、网格图或状态转移图三者之一; (2)根据输入数字信号编码生成卷积码并显示&#xf…

什么是流量攻击? 流量攻击怎么处理?

由于DDoS攻击往往采取合法的数据请求技术,再加上傀儡机器,造成DDoS攻击成为最难防御的网络攻击之一。据美国最新的安全损失调查报告,DDoS攻击所造成的经济损失已经跃居第一。 传统的网络设备和周边安全技术,例如防火墙和IDSs(Intr…