1# 自定义事件 2 3 4自定义组件内支持自定义事件，该事件的标识需要action类型指定为proxy，事件名则通过method指定。使用该自定义组件的卡片页面可以通过该事件名注册相应的事件回调，当自定义组件内该自定义事件触发时，会触发卡片页面上注册的回调事件。 5 6 7> **说明：** 8> 9> 事件名不支持大写字母。 10 11 12## 子组件comp示例： 13 14 15```html 16<!-- comp.hml --> 17<div class="container"> 18 <div class="row-3" if="true"> 19 <button onclick="buttonClicked" value="click"></button> 20 </div> 21</div> 22``` 23 24 25 26```css 27/* comp.css */ 28.container { 29 flex-direction:column; 30 background-color: green; 31 width: 100%; 32 height: 100%; 33} 34 35.row-3 { 36 width: 100%; 37 height: 50px; 38 background-color: orange; 39 font-size:15px; 40} 41``` 42 43 44 45```json 46{ 47 "data": { 48 }, 49 "actions": { 50 "buttonClicked": { 51 "action": "proxy", 52 "method":"event_1" 53 } 54 } 55} 56``` 57 58 59## 卡片页面示例 60 61 62```html 63<!-- xxx.hml --> 64<element name='comp' src='../../common/customComponent/customComponent.hml'></element> 65 66<div class="container"> 67 <comp @event_1="click"></comp> 68 <button value="parentClick" @click="buttonClick"></button> 69</div> 70``` 71 72 73 74```css 75/* xxx.css */ 76.container { 77 background-color: red; 78 height: 500px; 79 width: 500px; 80} 81``` 82 83 84 85```json 86{ 87 "data": { 88 }, 89 "actions": { 90 "click": { 91 "action": "message", 92 "params": { 93 "message": "click event" 94 } 95 }, 96 "buttonClick": { 97 "action": "message", 98 "params": { 99 "message": "click event 2" 100 } 101 } 102 } 103} 104``` 105