开源鸿蒙 自定义事件

  • 2022-10-28
  • 浏览 (559)

自定义事件

自定义组件内支持自定义事件,该事件的标识需要action类型指定为proxy,事件名则通过method指定。使用该自定义组件的卡片页面可以通过该事件名注册相应的事件回调,当自定义组件内该自定义事件触发时,会触发卡片页面上注册的回调事件。

说明:

事件名不支持大写字母。

子组件comp示例:

<!-- comp.hml -->
<div class="container">
    <div class="row-3" if="true">
        <button onclick="buttonClicked" value="click"></button>
    </div>
</div>
/* comp.css */
.container {
    flex-direction:column;
    background-color: green;
    width: 100%;
    height: 100%;
}

.row-3 {
    width: 100%;
    height: 50px;
    background-color: orange;
    font-size:15px;
}
{
    "data": {
    },
    "actions": {
        "buttonClicked": {
            "action": "proxy",        
            "method":"event_1"
        }
    }
}

卡片页面示例

<!-- xxx.hml --> 
<element name='comp' src='../../common/customComponent/customComponent.hml'></element>

<div class="container">
    <comp @event_1="click"></comp>
    <button value="parentClick" @click="buttonClick"></button>
</div>
/* xxx.css */
.container {
  background-color: red;
  height: 500px;
  width: 500px;
}
{
  "data": {
  },
  "actions": {
    "click": {
      "action": "message",
      "params": {
        "message": "click event"
      }
    },
    "buttonClick": {
      "action": "message",
      "params": {
        "message": "click event 2"
      }
    }
  }
}

你可能感兴趣的文章

开源鸿蒙 JS服务卡片UI组件

开源鸿蒙 数据类型说明

开源鸿蒙 button

开源鸿蒙 calendar

开源鸿蒙 chart

开源鸿蒙 clock

开源鸿蒙 divider

开源鸿蒙 image

开源鸿蒙 input

开源鸿蒙 progress

0  赞