标签：

通过在 UI 组件上绑定事件，开发者可以实现蓝河应用与用户之间的交互。

绑定事件

用法上，开发者可以使用 on (可以用@简写代替) 来绑定事件，如：onclick,onchange 可简写成 @click,@change，并在事件触发时执行对应的 JavaScript 业务代码。

示例如下

<template>
  <div class="tutorial-page">
    <text id="elNode1" class="{{ elClassName + 1 }}" disabled="false" onclick="onClickHandler"
      >组件节点1</text
    >
    <text
      id="elNode2"
      class="class-static-1 {{ elClassName + 2 }}"
      onclick="onClickHandler2('参数1', argName)"
      >组件节点2</text
    >
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;
  }
</style>

<script>
  export default {
    data: {
      elClassName: 'class-dynamic',
      argName: '动态参数',
    },
    onClickHandler(evt) {
      // 事件类型，参数详情
      console.info(`触发事件：类型：${evt.type}, 详情： ${JSON.stringify(evt.detail)}`)

      if (evt.target) {
        console.info(`触发事件：节点：${evt.target.id}, ${evt.target.attr.disabled}`)
      }
    },
    onClickHandler2(arg1, arg2, evt) {
      // 事件类型，事件参数，target
      console.info(`触发事件：类型：${evt.type}, 参数： ${arg1}, ${arg2}`)
    },
  }
</script>

事件传参

UI 组件可以向绑定的事件方法传递自定义参数。

示例如下

<template>
  <div class="demo-page">
    <text for="{{list}}" key="{{$idx}}" onclick="handle($idx,$item,total)">{{$item}}</text>
  </div>
</template>

<script>
  export default {
    data: {
      list: [1, 2, 3, 4, 5],
      total: 0,
    },
    handle(idx, item, total, $evt) {
      console.log(idx)
      console.log(item)
      console.log(total)
      console.log($evt)
    },
  }
</script>

回调函数被调用时，会在参数列表末尾自动添加一个 evt 参数，通过 evt 参数开发者可以访问回调事件相关上下文数据。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。