HarmonyOS 鸿蒙Next子组件的事件,如何正确让父组件进行响应?

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next子组件的事件,如何正确让父组件进行响应? 在 web 的 vue.js 中,可以通过 emit 将子组件的事件通知给父组件,父组件@监听 emit 的 key 值就可以处理子组件的事件响应了。

问:除了官网提供的这种透传方式以外,还有别的方式在父组件中,处理子组件内点击事件?


更多关于HarmonyOS 鸿蒙Next子组件的事件,如何正确让父组件进行响应?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

可以定义一个controller类,在controller类中定义和子组件中类型相同的方法,在子组件中将实际封装的方法给到controller。父组件在使用时,new一个controller对象然后转入子类中,在父组件中调用controller对应的方法

struct Child {
  @State private text: string = '初始值'
  private controller: ChildController = new ChildController();

  aboutToAppear() {
    if(this.controller) {
      //给controller对应的方法赋值
      this.controller.changeText = this.changeText
    }
  }

  //封装的能力
  private changeText = (value: string) =>{
    this.text = value
  }

  build() {
    Column() {
      Text(this.text)
    }
  }
}

//定义controller对象
class ChildController {
  changeText = (value: string) => {}
}

@Entry
@Component
struct Parent {
  private ChildRef = new ChildController()
  
  build() {
    Column() {
      Text('调用Child的changeText').fontSize('18vp').fontColor(Color.Gray)
      Divider()
      Child({ controller:this.ChildRef })
      Button('Parent调用childer的changeText').onClick(() => {
        this.ChildRef.changeText('Parent调用childer的changeText')
      })
    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")
  }
}

更多关于HarmonyOS 鸿蒙Next子组件的事件,如何正确让父组件进行响应?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢回答🙏;可能不太符合我的预期,这依旧是父组件主动调用子组件的方法;

我所期望的是子组件主动通知父组件,父组件有能力监听到子组件的事件;

请问还有别的方案吗?

有些过重了吧😂😂,虽然能满足需求,总感觉不是标准化的父子之间通信的方案;,

在HarmonyOS鸿蒙系统中,要让父组件正确响应Next子组件的事件,可以通过事件冒泡机制或者显式的事件传递来实现。

  1. 事件冒泡机制: 在鸿蒙系统中,子组件的事件默认会冒泡到父组件。如果子组件(Next子组件)触发了一个事件,且该事件没有在子组件内部被消费,那么该事件会继续向上传播到父组件。父组件可以通过事件监听器来捕获并处理这个事件。

  2. 显式的事件传递: 如果事件冒泡机制不满足需求,或者需要更精细地控制事件传递过程,可以在子组件中显式地调用父组件的方法或发送自定义事件。这通常涉及到在子组件中定义一个事件或方法,并在需要时触发或调用它,同时确保父组件能够接收到并处理这个事件或方法调用。

在编写代码时,需要确保父组件已经正确地注册了事件监听器,或者已经提供了可以被子组件调用的方法。同时,也要注意事件的类型和处理逻辑是否与预期一致。

如果问题依旧没法解决请联系官网客服,官网地址是: https://www.itying.com/category-93-b0.html

回到顶部