HarmonyOS父子组件传递参数

已于 2024-06-21 14:07:42 修改
阅读量2k 收藏 7
点赞数 5
分类专栏： HarmonyOS 文章标签： harmonyos pytorch 深度学习
于 2024-06-21 10:44:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972992/article/details/139837754
版权

HarmonyOS父子组件传递参数

1. 使用@State和@Prop进行父子组件传递———注意是单向同步

@Prop装饰器：父子单向同步

  • 注意：只支持单向同步，同时也只能支持string\number\boolean\enum比较简单的类型。
    在这里插入图片描述

代码

// 使用 props 进行父子组件传值
@Component
struct SonCom {
  // 父子间传递过来的数据使用 @Prop 进行接受
  @Prop sonCar: string
  // 修改传递的参数
  changeInfo = (info: string)=> {}
  build() {
    Column() {
      Text(`这是子组件的盒子--- ${this.sonCar}`)

      Button('子组件修改父组件的数据').onClick((event: ClickEvent) => {
        this.changeInfo('吉利银河 L7 ----' + Math.ceil(Math.random() * 10))
      })
    }
    .width('100%')
    .height(100)
    .backgroundColor(Color.Orange)
  }
}


@Entry
@Component
struct PropsPage {
  @State info: string = '比亚迪 宋'

  changeInfo = (newInfo: string)=>{
    this.info = newInfo
  }

  build() {
    Column({space: 20}) {
      Text(`这是父组件的盒子 ${this.info}`)

      Button('修改父组件的数据').onClick((event: ClickEvent) => {
        this.info = '领克 08---' + Math.ceil(Math.random() * 10)
      })
      // 这是子组件
      SonCom({
        sonCar: this.info,
        changeInfo: this.changeInfo
      })
    }
    .width('100%')
    .height(300)
    .backgroundColor(Color.Pink)
  }
}

演示
在这里插入图片描述

2. @Link装饰器：父子双向同步

@Link装饰器：父子双向同步

  • 注意
    在这里插入图片描述
// 子组件
@Component
struct ChildCom {
  @Link list: number[]

  build() {
    Column() {

      List({space: 10}) {
        ForEach(this.list, (item: number, index) => {
          ListItem() {
            Text(item.toString())
              .width('100%')
              .padding(10)
              .backgroundColor(Color.White)

          }
        })
      }
    }.onClick(() => {
      this.list.push(this.list.length + 1)
    })
  }
}


// 父组件
@Entry
@Component
struct StateLink {
  @State list: number[] = [1, 2, 3]

  build() {
    Column() {
      ChildCom({
        // 注意,这里调用时,使用$替换this,这是语法规定
        list: $list
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

在这里插入图片描述

3. @Provide装饰器和@Consume装饰器：与后代组件双向同步

@Provide装饰器和@Consume装饰器：与后代组件双向同步

  • 注意：@Consume装饰的变量通过相同的属性名绑定其祖先组件@Provide装饰的变量，在这里就是SunziCom中的@Consume listInfo: ListItemClass与祖先组件ProvideConsume中的@Provide listInfo: ListItemClass属性名保持一致。
// 这是模拟的数据
@Observed
class ListItemClass {
  name: string
  likeNum: number
  isLike: boolean
  comment: string

  constructor(name: string, likeNum: number, isLike: number, comment: string) {
    this.name = name
    this.likeNum = likeNum
    this.isLike = isLike === 0 ? false : true
    this.comment = comment
  }
}


// 这是 孙子组件
@Component
struct SunziCom {
  // 注意:这里的属性名要保持和 @Provide修饰的父组件属性名一致.
  @Consume listInfo: ListItemClass
  build() {
    Column() {
      Text(this.listInfo.name)
        .fontSize(18)
        .fontWeight(700)
        .fontColor('#333')
        .margin({
          bottom: 10
        })

      Row() {
        Text(this.listInfo.comment)

        Row() {
          Text(this.listInfo.likeNum.toString())
            .fontColor(this.listInfo.isLike ? Color.Red : '#333')
        }
        .onClick(() => {

          if (this.listInfo.isLike) {
            this.listInfo.likeNum -= 1
          } else {
            this.listInfo.likeNum += 1
          }
          this.listInfo.isLike = !this.listInfo.isLike
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .padding(10)
    .borderRadius(10)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .backgroundColor(Color.White)
  }
}
// 这是 儿子组件
@Component
struct ErziCom {
  build() {
    SunziCom()
  }
}


@Entry
@Component
struct ProvideConsume {
  @Provide listInfo: ListItemClass = new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`)
  build() {
    Column(){
      ErziCom()
    }
  }
}

在这里插入图片描述

4. 使用@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化，主要是可以处理Link遇上ForEach而导致一些奇怪的问题

@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

// 这是模拟的数据
@Observed
class ListItemClass {
  name: string
  likeNum: number
  isLike: boolean
  comment: string

  constructor(name: string, likeNum: number, isLike: number, comment: string) {
    this.name = name
    this.likeNum = likeNum
    this.isLike = isLike === 0 ? false : true
    this.comment = comment
  }
}

function createData() {
  return [
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`),
    new ListItemClass(`小火车况且况且-${Math.ceil(Math.random() * 10)}`, Math.ceil(Math.random() * 100), Math.floor(Math.random() * 2), `这是随机的评论--${Math.ceil(Math.random() * 1000)}`)
  ]
}


// 子组件
@Component
struct ChildCom {
  @ObjectLink listInfo: ListItemClass

  build() {

    Column() {
      Text(this.listInfo.name)
        .fontSize(18)
        .fontWeight(700)
        .fontColor('#333')
        .margin({
          bottom: 10
        })

      Row() {
        Text(this.listInfo.comment)

        Row() {
          Text(this.listInfo.likeNum.toString())
            .fontColor(this.listInfo.isLike ? Color.Red : '#333')
        }
        .onClick(() => {

          if (this.listInfo.isLike) {
            this.listInfo.likeNum -= 1
          } else {
            this.listInfo.likeNum += 1
          }
          this.listInfo.isLike = !this.listInfo.isLike
        })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
    }
    .padding(10)
    .borderRadius(10)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .backgroundColor(Color.White)
  }
}


// 父组件
@Entry
@Component
struct ObservedObjectLink {
  @State list: ListItemClass[] = createData()

  build() {
    Column() {
      List({
        space: 10
      }) {
        ForEach(this.list, (item: ListItemClass, index: number) => {
          ListItem() {
            ChildCom({
              listInfo: item
            })
          }
        })
      }
    }
    .padding(10)
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

在这里插入图片描述

HarmonyOS：自定义父子组件之间如何进行事件传递以及解决this指向问题
luxingxing1的博客
07-18 1866
在父组件中初始化子组件时，将父组件中定义的方法，传递给子组件，在子组件中调用该方法
HarmonyOS4.0开发08——父子组件之间的数据同步@Prop和@Link
爱吃雪糕的小布丁的博客
11-16 589
通过前面的学习，我们知道，父组件使用子组件的时候，可以把数据通过传参的方式传递给子组件。但是这种方式只能用来做子组件数据的初始化，父组件中的数据改变，子组件是监听不到的。
Harmony OS 父子组件传参
qq_35946021的博客
03-04 2350
要改变message时，父组件的message改变不了，只能改变子组件的参数。时，改变message值，参数跟着更新。并且子组件也跟着更新（类似于vue的prop传参，只能父组件传参给子组件。
鸿蒙HarmonyOS组件之间的数据传递
最新发布
wqad23256的博客
02-18 1701
在鸿蒙Next开发过程中，组件间的数据传递是开发者需要掌握的重要技能。本文介绍了鸿蒙Next开发中的一些组件传递数据的方法，包括父子组件、子父组件和兄弟组件之间以及一些非相关组件之间的数据传递。在上面的代码中，PageA通过创建一个Want对象来指定目标页面的路径和要传递的参数。在鸿蒙Next开发过程中，组件间的数据传递是一个至关重要的环节。非相关组件之间的数据传递通常指的是没有直接父子关系的组件之间的通信。在鸿蒙Next开发中，父子组件之间的数据传递是最常见的一种场景。
HarmonyOS应用开发-参数传递（router）
2302_80840424的博客
12-05 870
关于API9到API12的升级，我想唠嗑几句，API9的传参通过router跳转，跳转路径上通过params携带参数，在二级页面接收，唠叨到这里似乎一切都没有问题，API12虽说新添了一个路由组件 (Navigation)也能传参，而且官网也推荐新路由传参，好话说，没有问题就是最大的问题【阴笑】。API9的传参想必各位都知道，其中我最爱的是API9传参可以通过params携带之前封装好的数据（数组），全部携带到二级页面中去，在二级页面，只需要简单的接收参数就ok了。方法来获取传递过来的参数。
HarmonyOS开发：传参方式
m0_64455070的博客
01-07 1111
一、父子组件传参1、父传子（@Prop方式）父组件代码子组件代码2、父传子（@Link方式,实现双向绑定）父组件代码子组件代码父组件通过@Link方式将的值传递给子组件，并实现了双向绑定。当子组件中的按钮被点击时，value的值会增加，同时父组件中的也会同步更新。二、页面间的传参（使用router模板）1、页面A代码页面B代码页面A通过方法跳转到页面B，并在params参数中传递了dataToSend的值。页面B在生命周期方法中通过方法获取了这个值，并将其显示在页面上。
HarmonyOS 父子组件数据通信(Prop与Link)
weixin_45966674的博客
12-24 2742
但这种传递是单向的 我们修改子组件的 const 父组件不会受影响 而且不要在子组件中乱动父组件传的值 你在子组件改父组件传的东西 是有问题的。但是 我们明显发现 我们传给子组件的 const 没有因为父组件的name改变而改变。此时 我们点击button按钮 Prop 修饰的变量会根据父组件的传递内容变化而变化。然后 我们点击父组件的button name是会发生改变的 从小猫猫变成小狗狗。然后 我们父组件调用子组件 一个传入了const 一个没传。我们可以先写一个这样的小案例。
【中工开发者】Harmony Os中不同类型和不同层次组件和页面之间的数据传输方式
weixin_73843101的博客
12-06 889
在HarmonyOS中，ArkUI框架提供了多种数据传递方式，以实现不同层级和不同类型组件间的数据交互。旨在详细阐述鸿蒙OS中不同层级和不同类型组件间的数据传递方式，包括父子组件、爷孙组件、兄弟组件以及不同页面组件间的数据传递。
HarmonyOS NEXT应用开发：UI基本语法-@LocalBuilder装饰器： 维持组件父子关系
ZPYQAQ的博客
01-13 1979
当开发者使用@Builder做引用数据传递时，会考虑组件的父子关系，使用了bind(this)之后，组件的父子关系和状态管理的父子关系并不一致。
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
10-13
16. @Prop不支持父子组件的双向数据绑定，它用于父组件向子组件传递数据。 17. 卡片组件常用于嵌入其他应用，支持基本交互功能如拉起页面和发送消息。 18. Refresh组件支持下拉刷新操作，显示刷新动画。 19. 对...
HarmonyOS开发之组件通信
Austin的博客
09-11 987
Provide装饰的变量是在祖先节点中，可以理解为被“提供”给后代的状态变量。@Consume装饰的变量是在后代组件中，去“消费（绑定）”祖先节点提供的变量。简单解释，一般父组件在子组件中传递变量，子组件改变变量父组件是不会同步的，子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。限制条件 @Prop装饰器不能在@Entry装饰的自定义组件中使用。但是使用@link装饰器，就会实现双向绑定，父组件的值也会同步改变。
鸿蒙HarmonyOS实战：状态管理和传值
m0_64422261的博客
06-19 2323
@State是一个装饰器，是用来存放数据的，比较好理解
【HarmonyOS】HarmonyOS NEXT学习日记：八、组件通信
九日的博客
07-31 1238
通过前面的学习我们基本上掌握了如何封装组件，但是实际使用过程中组件之间的状态需要互相之间关联通讯，涉及到父子组件，后代组件之间的相互通信。
小程序传参总结
2303_76218115的博客
04-03 3861
在小程序开发中，页面跳转和数据传递是非常常见的需求。本文将介绍小程序中常用的传参方法，包括Query参数传递、全局变量传递和Storage传递，并对它们的使用场景和注意事项进行分析和总结。本文介绍了小程序中常用的传参方法，包括Query参数传递、全局变量传递和Storage传递等并对它们的使用场景和注意事项进行了分析和总结。在实际开发中，我们需要根据具体的需求和情况，不同的方式适用于不同的场景，灵活地选择传参方式，并结合一些优秀的状态管理工具，提高开发效率和用户体验，以上便是全部内容希望对各位同学有所帮助。
【鸿蒙HarmonyOS NEXT】页面之间相互传递参数
若兰幽竹
09-07 4656
页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。我们现在模拟用户从登录页面（如页面名称为LoginPage）调整到首页（HomePage），将用户登录信息传递给HomePage，当从HomePage返回到登录页面时也将HomePage的数据传递给LoginPage页面。输入账号和密码，点击登录，页面进行跳转，
组件通信——子传父
Wen先森的博客
04-19 8944
具体而言，在Vue.js中，每个组件都可以看作是一个独立的实例，它们之间可以通过特定的Props和Events属性进行双向绑定和通信。子组件在初始化时可以接收来自父组件的数据，并通过props属性绑定这些数据。总之，“子传父”是Vue中非常重要的一个概念，它可以帮助我们更好地维护组件间的数据和功能的分离，同时也能提高程序的可读性和可维护性。Vue.js是一个组件化的前端开发框架，支持父子组件之间的消息传递和数据通信。子组件向父组件传递消息的过程称为“子传父”或“props down，events up”。
【鸿蒙】跨组件通信，父子组件互相调用传值
qq_22015625的博客
12-31 691
BuilderFourPage()// 1、创建一个事件分发器@Entry@Componentbuild() {NavigationBar({ title: '测试' })Button('调用子组件方法').onClick(() => {// 3、发送事件});@Component// 2、在子组件或父组件中添加订阅事件console.info('我是子组件方法', '父组件传递的值为：' + value);build() {
鸿蒙开发之组件间方法传递（方法回调）
Lu_Ca的博客
03-01 4905
目前使用的方式有两种，一种是父子组件方法传递，一种是系统提供的emitter。
harmonyos 子组件通知父组件
01-03
### HarmonyOS 中子组件向父组件发送通知 在 HarmonyOS 开发中，为了使子组件能够有效地通知父组件并进行数据传递，通常采用事件回调的方式。这种方式允许父组件将处理逻辑作为参数传递给子组件，当特定条件满足时，子组件触发这些回调函数来通知父组件。 #### 实现方式概述 - **事件绑定**：父组件定义一个方法用于响应来自子组件的通知，并将其作为属性传入子组件。 - **回调执行**：子组件内部调用接收到的方法完成对父组件的通知过程[^1]。 #### 示例代码展示 ##### 父组件部分 下面展示了如何在一个假设名为 `ParentComponent` 的类里设置监听器： ```java // 定义接口以便于解耦合 public interface OnChildEventListener { void onEventFromChild(String message); } @Component(name = "parent_component") class ParentComponent extends ComponentContainer { private final OnChildEventListener listener; public ParentComponent(Context context, OnChildEventListener listener) { super(context); this.listener = listener; } // 构建布局时初始化子组件实例并将当前对象中的listener赋值过去 @Override protected void onCreate() { ChildComponent childComp = new ChildComponent(getContext(), (msg)->{ if(listener != null){ listener.onEventFromChild(msg); // 当子组件触发此lambda表达式的call back，则会调用到这里的onEventFromChild() } }); addChild(childComp); } } ``` ##### 子组件部分 这里是一个简单的 `ChildComponent` 类实现，它接收由父级提供的回调函数并在适当时候调用它们： ```java @Component(name="child_component") class ChildComponent extends ComponentContainer { private Consumer<String> eventCallback; public ChildComponent(Context context, Consumer<String> callback) { super(context); this.eventCallback = callback; } // 假设有一个按钮点击事件或者其他任何情况发生的时候我们想要通知父组件 private void someActionHappened(){ String msgToParent = "Hello from Child!"; if(eventCallback!=null){ eventCallback.accept(msgToParent); // 调用父组件注册的callback } } // ...其他业务逻辑... } ``` 上述例子说明了怎样利用Java8特性——Lambda表达式简化了父子间通信的设计模式；同时也体现了面向接口编程的思想使得程序结构更加清晰合理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值