上一节说了模板(template)或者组件(component)的区别,介绍了组件的使用,父级使用组件传值用的是properties属性,传值到组件,那么子组件向父级传值怎么使用呢?
组件通过事件向父级传递;
触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项:说明见官方说明
页面 使用组件,通过 bind:methods来定义方法:
<!-- useComponent.wxml -->
<view class="list" wx:for="{{contentList}}" wx:key="contentId">
//定义了numChange方法
<content id="content" dto="{{item}}" bind:numChange="numChange"></content>
</view>
<view wx:if="{{changeVal}}">收到值:{{changeVal}}</view>
<!-- useComponent.js -->
// 与content组件 传值
numChange(e) {
console.log(e.detail) //接收到的数据
let fromNum = e.detail.num
this.setData({
changeVal: fromNum
});
},
content组件中:
<!-- content.wxml -->
<view class="clearfix" data-contentid="{{item.contentId}}">
<view class="inco_list inco_praise" data-contentid="{{dto.contentId}}" >
//numToTop 使用传值
<text catchtap="numToTop">{{dto.name}}:{{dto.title}}</text>
<text class="num" catchtap="addNum">get: {{dto.num}}</text>
</view>
</view>
<!-- content.js -->
//向父级传值
numToTop() {
let that = this;
let num = that.properties.dto.num;
this.triggerEvent('numChange', {
num: num
})
}