js-components-custom-event-parameter.md 1.0 KB
Newer Older
G
ge-yafang 已提交
1
# Event Parameter
M
mamingshuai 已提交
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event:

```
<!-- comp.hml -->
<div class="item">  
   <text class="text-style" onclick="childClicked">Click here to view the hidden text.</text> 
   <text class="text-style" if="{{showObj}}">hello world</text> 
</div>
```

```
// comp.js
export default { 
  childClicked () {
     this.$emit('eventType1', {text: 'Receive the parameters from the child component.'});
    this.showObj = !this.showObj;
  },
}
```

In the following example, the child component passes the  **text**  parameter to the parent component, and the parent component obtains the parameter through  **e.detail**:

```
<!-- xxx.hml -->
<div class="container">  
   <text>Parent component: {{text}}</text> 
   <comp @event-type1="textClicked"></comp>  
</div>
```

```
// xxx.js
export default { 
  data: {
     text: 'Start',
  },
  textClicked (e) {
    this.text = e.detail.text;
  },
}
```