HarmonyOS 鸿蒙Next 事件传递，父子组件，outouch事件响应

HarmonyOS 鸿蒙Next 事件传递，父子组件，outouch事件响应

// 中部区域 Blank() .height(‘60%’) .width(‘35%’) .backgroundColor(Color.Transparent) .onTouch((event) => { if (event.type === TouchType.Down) { console.log(‘Center area pressed’) } })

我在中部区域的touch事件会通过if渲染另外一个组件，我如何把touch事件传递给子组件VirtualRoller响应，因为我在子组件也需要处理touch事件

@Component export default struct Setting { private readonly TAG = ‘Setting’; @State MouseMode: boolean = false;

build() { Stack() { if (this.MouseMode) { VirtualRoller() .id(‘VirtualRoller’) .width(150) .height(150) } else { Stack() { // 底图 Image($r(‘app.media.ic_background’)) .objectFit(ImageFit.Contain) // 点击区域容器 Column() { // 上部区域 Blank() .height(‘20%’) .width(‘40%’) .backgroundColor(Color.Transparent) .onTouch((event) => { if (event.type === TouchType.Down) { this.MouseMode = true } if (event.type === TouchType.Up) { this.MouseMode = false } }) Row() { // 左侧区域（左键） Blank() .height(‘60%’) .layoutWeight(1) .backgroundColor(Color.Transparent) // 中部区域 Blank() .height(‘60%’) .width(‘35%’) .backgroundColor(Color.Transparent) .onTouch((event) => { if (event.type === TouchType.Down) { console.log(‘Center area pressed’) } }) // 右侧区域（右键） Blank() .height(‘60%’) .layoutWeight(1) .backgroundColor(Color.Transparent) } // 下部区域 Blank() .height(‘20%’) .width(‘40%’) .backgroundColor(Color.Transparent)

        }
      }
      .width('100%')
      .layoutWeight(1)

  }
}
.width(150)
.height(150)
.margin({top: 100})

} }


更多关于HarmonyOS 鸿蒙Next 事件传递，父子组件，outouch事件响应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复 
父组件中定义mouseMode：

```javascript
[@State](/user/State) mouseMode:string = ''
Blank()
  .height('60%')
  .width('35%')
  .backgroundColor(Color.Transparent)
  .onTouch((event) => {
    if (event.type === TouchType.Down) {
      this.mouseMode = 'Down'
    }
  })

Setting({mouseMode : this.mouseMode })

子组件：使用@Prop装饰器传递父组件状态

[@Component](/user/Component)
export default struct Setting {
  private readonly TAG = 'Setting';
  [@Prop](/user/Prop) MouseMode: string;

  build() {
    Stack() {
      if (this.MouseMode === 'Down') {
        VirtualRoller()
          .id('VirtualRoller')
          .width(150)
          .height(150)
      } else {
          // else
      }
    }
    .width(150)
    .height(150)
    .margin({top: 100})
  }
}

更多关于HarmonyOS 鸿蒙Next 事件传递，父子组件，outouch事件响应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


setting是父组件，VirtualRoller是子组件，我在setting中的blank触发touch的down事件，让VirtualRoller显示出来，能直接传递touch事件到子组件VirtualRoller吗，还是直接在外层的VirtualRoller监听，

将 mouseMode 传递给子组件，VirtualRoller({mouseMode: this.mouseMode})，子组件中监听 mouseMode 。

大佬是不是我讲错了，根据我文章的代码，我在父组件监听mouseMode显示了VirtualRoller组件，应该不需要传过去了吧。并且我打印监听的话，因为我是按下显示VirtualRoller组件，这个时候我用另外一根手指是能打印到event的，我想要的是单独按下也能响应VirtualRoller内部的ontouch事件。

看着，您这期望的是： 父组件的状态、传递给子组件

以下不知是不是你需要的：

[@Prop装饰器：父子单向同步](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-prop-V13)

概述

[@Prop](/user/Prop)装饰的变量和父组件建立单向的同步关系：

  • [@Prop](/user/Prop)变量允许在本地修改，但修改后的变化不会同步回父组件。
  • 当数据源更改时，[@Prop](/user/Prop)装饰的变量都会更新，并且会覆盖本地所有更改。因此，数值的同步是父组件到子组件（所属组件)，子组件数值的变化不会同步到父组件。

setting是父组件，VirtualRoller是子组件，我在setting中的blank触发touch的down事件，让VirtualRoller显示出来，能直接传递touch事件到子组件VirtualRoller吗，还是直接在外层的VirtualRoller监听，

在HarmonyOS鸿蒙Next中，事件传递机制通过EventHub和Component实现。父子组件之间的事件传递通常使用EventHub进行通信。父组件可以通过EventHub发布事件，子组件通过订阅相应事件来响应。

对于outouch事件，鸿蒙系统提供了TouchEvent来处理触摸事件。TouchEvent包含触摸的坐标、动作（如按下、移动、抬起）等信息。父组件和子组件都可以通过onTouchEvent方法来处理触摸事件。

在父子组件中，事件传递的顺序通常是先由子组件处理，如果子组件未处理，则事件会冒泡到父组件。可以通过重写onTouchEvent方法来决定是否处理事件，或者将事件传递给父组件。

示例代码：

// 父组件
class ParentComponent extends Component {
    onTouchEvent(event: TouchEvent): boolean {
        // 处理父组件的触摸事件
        return super.onTouchEvent(event);
    }
}

// 子组件
class ChildComponent extends Component {
    onTouchEvent(event: TouchEvent): boolean {
        // 处理子组件的触摸事件
        return super.onTouchEvent(event);
    }
}

通过EventHub发布和订阅事件的示例：

// 父组件发布事件
this.eventHub.emit('customEvent', data);

// 子组件订阅事件
this.eventHub.on('customEvent', (data) => {
    // 处理事件
});

鸿蒙Next的事件传递机制灵活，支持多种事件类型和传递方式，开发者可以根据需求选择合适的处理方式。

回到顶部