微信小程序父组件获取子组件的点击事件——子组件给父组件传值

783 阅读1分钟

要在微信小程序父组件中获取子组件的点击事件,可以使用自定义事件(Custom Event)来实现。具体步骤如下:

  1. 在子组件中定义一个事件,例如:
// 子组件的 js 文件
Component({
  methods: {
    handleClick() {
      // 点击事件发生时,触发自定义事件,并将事件的参数传递给父组件
      this.triggerEvent('myevent', { data: 'hello' })
    }
  }
})

在这个例子中,当用户点击子组件时,会触发 handleClick 方法,该方法会调用 triggerEvent 方法,触发名为 myevent 的自定义事件,并将 { data: 'hello' } 作为事件参数传递给父组件。

  1. 在父组件中引入子组件,并为子组件绑定自定义事件的处理函数,例如:
// 父组件的 js 文件
Page({
  handleMyEvent(e) {
    console.log('接收到子组件的自定义事件', e.detail)
  }
})

在这个例子中,我们定义了 handleMyEvent 方法作为子组件自定义事件的处理函数,当子组件触发 myevent 事件时,该方法会被调用,事件的参数会以 e.detail 的形式传递给该方法。在这个例子中,我们只是简单地在控制台打印事件的参数,你可以根据自己的需求对事件参数进行处理。

  1. 在父组件中引用子组件时,为子组件绑定自定义事件的处理函数,例如:
<!-- 父组件的 wxml 文件 -->
<child-component bind:myevent="handleMyEvent"></child-component>

在这个例子中,我们为子组件绑定了自定义事件 myevent 的处理函数 handleMyEvent,这样当子组件触发 myevent 事件时,父组件就能够接收到该事件并处理事件的参数了。

通过上述步骤,就可以实现微信小程序父组件获取子组件的点击事件,并在事件中传递数据给父组件了。