返回介绍

事件处理

发布于 2020-10-10 07:56:10 字数 1637 浏览 1221 评论 0 收藏 0

Mpx在事件处理上基于原生小程序,支持原生小程序的全部事件处理技术规范,在此基础上新增了事件处理内联传参的增强机制。

原生小程序事件处理详情请参考这里

增强的内联传参能力对于传递参数的个数和类型没有特殊限制,可以传递各种字面量,可以传递组件数据,甚至可以传递for中的item和index, 当内联事件处理器中需要访问原始事件对象时,可以传递$event特殊关键字作为参数,在事件处理器的对应参数位置即可获取。

示例如下:

<template>
  <view>
    <!--原生小程序语法,通过dataset进行传参-->
    <button data-name="a" bindtap="handleTap">a</button>
    <!--Mpx增强语法,模板内联传参,方便简洁-->
    <button bindtap="handleTapInline('b')">b</button>
    <!--参数支持传递字面量和组件数据-->
    <button bindtap="handleTapInline(name)"></button>
    <!--参数同样支持传递for作用域下的item/index-->
    <button wx:for="{{names}}" bindtap="handleTapInline(item)">{{item}}</button>
    <!--需要使用原始事件对象时可以传递$event特殊关键字-->
    <button bindtap="handleTapInlineWithEvent('g', $event)">g</button>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data: {
      name: 'c',
      names: ['d', 'e', 'f']
    },
    methods: {
      handleTap (e) {
        console.log('name:', e.target.dataset.name)
      },
      // 直接通过参数获取数据,直观方便
      handleTapInline (name) {
        console.log('name:', name)
      },
      handleTapInlineWithEvent (name, e) {
        console.log('name:', name)
        console.log('event:', e)
      }
    }
  })
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文