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