(与Vue父子组件传参原理一样,学过Vue的盆友更容易上手哦)
父传子
- (1)在父组件中的子组件标签添加属性,给子组件传递数据
<submit-bar total="{{total}}" ></submit-bar>
- (2)子组件在js中通过properties接收,可以指定接收数据类型
properties: {
total: Number
}
// 也可以设置默认值的写法
properties: {
total: {
type: Number,
value: 0
}
}
子传父
- (1)在父组件的子组件标签自定义事件,传给子组件
<submit-bar bind:自定义名称="clickHandler"></submit-bar>
- (2)子组件用
this.triggerEvent('父组件自定义事件', '要传递的参数')
,触发父组件传过来的自定义事件
this.triggerEvent("clickHandler", 'Hello World!')
(3)第二步执行后,父组件自定义事件绑定的函数就会执行,同时接受子组件传过来的数据
submit(e) {
console.log(e)
// 可以看到父组件接收到子组件传过来的参数
// e.currentTarget.detail.total可以获取到
},
- 总结:可以看到父组件接收到子组件传过来的参数可以通过e.currentTarget.detail.total可以获取到
子传父-获取当前点击的元素的index
- 可以通过遍历的时候设置data-index属性(data-index是自定义属性,也可以叫data-id,别误解为固定写法)
// html部分
<view class="item-content"
wx:for="{{ imageList }}"
wx:key="*this"
data-index="{{index}}"
bind:自定义名称="clickItem"
>
</view>
// js部分
clickItem(e) {
this.triggerEvent('changeItem', e.currentTarget.dataset.index)
}
- 总结:设置自定义属性,做一个标识,方便获取。传递来的数据,在上面的clickItem点击函数中打印即可找到