# 自定义事件
子组件comp定义如下：
<!-- comp.mxl -->
<div class="item">
<text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text>
<text class="text-style" if="{{showObj}}">hello world</text>
</div>
1
2
3
4
5
2
3
4
5
/* comp.css */
.item {
width: 700px;
flex-direction: column;
height: 300px;
align-items: center;
margin-top: 100px;
}
.text-style {
font-weight: 500;
font-family: Courier;
font-size: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// comp.js
export default {
data: {
showObj: false,
},
childClicked () {
this.$emit('eventType1');
this.showObj = !this.showObj;
},
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
引入子组件的示例如下：
<!-- xxx.mxl -->
<element name='comp' src='../../common/component/comp.mxl'></element>
<div class="container">
<comp @event-type1="textClicked"></comp>
</div>
1
2
3
4
5
2
3
4
5
/* xxx.css */
.container {
background-color: #f8f8ff;
flex: 1;
flex-direction: column;
align-content: center;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
// xxx.js
export default {
textClicked () {},
}
1
2
3
4
2
3
4