1# 自定义事件<a name="ZH-CN_TOPIC_0000001209412147"></a> 2 3子组件comp定义如下： 4 5``` 6<!-- comp.hml --> 7<div class="item"> 8 <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> 9 <text class="text-style" if="{{showObj}}">hello world</text> 10</div> 11``` 12 13``` 14/* comp.css */ 15.item { 16 width: 700px; 17 flex-direction: column; 18 height: 300px; 19 align-items: center; 20 margin-top: 100px; 21} 22.text-style { 23 font-weight: 500; 24 font-family: Courier; 25 font-size: 40px; 26} 27``` 28 29``` 30// comp.js 31export default { 32 data: { 33 showObj: false, 34 }, 35 childClicked () { 36 this.$emit('eventType1'); 37 this.showObj = !this.showObj; 38 }, 39} 40``` 41 42引入子组件的示例如下： 43 44``` 45<!-- xxx.hml --> 46<element name='comp' src='../../common/component/comp.hml'></element> 47<div class="container"> 48 <comp @event-type1="textClicked"></comp> 49</div> 50``` 51 52``` 53/* xxx.css */ 54.container { 55 background-color: #f8f8ff; 56 flex: 1; 57 flex-direction: column; 58 align-content: center; 59} 60``` 61 62``` 63// xxx.js 64export default { 65 textClicked () {}, 66} 67``` 68 69