小程序组件传值

子组件需要通过事件传值,以点击事件change为例

1
2
3
4
5
<!-- 子组件B  wxml -->
<view class="inner">
{{theIdy}}
<button bindtap='change'>向A中传入参数</button>
</view>

通过触发“change”事件进行传值操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//子组件JS
Component({
//B在这里接收与data类似可以直接在wxml上用
properties: {
theId: {
type: String,//类型
}
},
data: {

},
methods: {
//触发change事件
change: function () {
//通过triggerEvent(给父组件一个事件名称,需要传的参数)传值
this.triggerEvent('myevent', this.properties.theId);
}
}
})

父组件接收

1
2
3
4
5
<!-- 父组件 wxml -->
<view>
<temp theId="{{id}}" bind:myevent="onMyEvent"></temp>
{{ theId }}
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 父组件JS

Page({

data: {
id: "1",
theId: 0
},
onMyEvent: function (e) {
//通过事件接收
this.setData({
theId: e.detail.theId
})
}
})

看不懂的可以先看上一篇文章,《关于小程序的组件及传值》