js-components-custom-event-parameter.md 884 字节
Newer Older
Z
zengyawen 已提交
1
# 事件参数
M
mamingshuai 已提交
2 3 4

子组件也可以通过绑定的事件向上传递参数,在自定义事件上添加传递参数的示例如下:

Z
zengyawen 已提交
5

H
geshi  
HelloCrease 已提交
6
```html
M
mamingshuai 已提交
7 8 9
<!-- comp.hml -->
<div class="item">  
   <text class="text-style" onclick="childClicked">点击这里查看隐藏文本</text> 
H
HelloCrease 已提交
10
   <text class="text-style" if="{{ showObj }}">hello world</text> 
M
mamingshuai 已提交
11 12 13
</div>
```

Z
zengyawen 已提交
14

H
geshi  
HelloCrease 已提交
15
```js
M
mamingshuai 已提交
16 17 18 19 20 21 22 23 24
// comp.js
export default { 
  childClicked () {
    this.$emit('eventType1', {text: '收到子组件参数'});
    this.showObj = !this.showObj;
  },
}
```

Z
zengyawen 已提交
25

M
mamingshuai 已提交
26 27
子组件向上传递参数text,父组件接收时通过e.detail来获取参数:

Z
zengyawen 已提交
28

H
geshi  
HelloCrease 已提交
29
```html
M
mamingshuai 已提交
30 31 32 33 34 35 36
<!-- xxx.hml -->
<div class="container">  
   <text>父组件:{{text}}</text> 
   <comp @event-type1="textClicked"></comp>  
</div>
```

Z
zengyawen 已提交
37

H
geshi  
HelloCrease 已提交
38
```js
M
mamingshuai 已提交
39 40 41 42 43 44 45 46 47 48
// xxx.js
export default { 
  data: {
    text: '开始',
  },
  textClicked (e) {
    this.text = e.detail.text;
  },
}
```