子组件向父组件传值
(建议从《自定义组件篇》看起,这样不会混乱)
参考文档
再次提醒:看到这里不懂的记得回去看 自定义组件篇
- 在MyHeader.wxml中编写按钮,按钮传值到父组件中,需要绑定bindtap="onTap"
<view>
I'm Burnit Chen from China
<button type="primary" bindtap="onTap">子组件向父组件传值</button>
</view>
- 在MyHeader.js中编写onTop方法
// components/MyHeader/MyHeader.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onTap(){
var myEventDetail = {"name":"Burnit Chen"} // detail对象,提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail)
}
}
})
myevent 就是事件名
- 在index.wxml父组件的自定义组件中触发myevent事件,调用onMyEvent方法
<view>
<MyHeader bindmyevent="onMyEvent"></MyHeader>
</view>
bindmyevent :可以看成bind+myevent(事件名)组合,bind是固定的,改变的是事件名。如果我在上面的 this.triggerEvent('myevent', myEventDetail)定义的事件名是'mything',那么现在就是bindmything,bindmything="onMyEvent"
- 在index.js编写onMyEvent方法
Page({
/**
* 页面的初始数据
*/
data: {
name:''
},
onMyEvent(res){
//console.log(res)
this.setData({
name:res.detail.name
})
}
})
- 最后把name传到index.wxml页面中
<view>
<MyHeader bindmyevent="onMyEvent"></MyHeader>
{{name}}
</view>