小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
早上在研究微信小程序官方文档的时候，无意间发了一个比较好玩的用法：小程序竟然可以向子组件传递函数，子组件调用父组件的方法获取值的方法，个人觉得在复杂开发中这个功能还蛮实用的。也许是我孤陋寡闻，但确实是我的知识盲点，特意记录一下用法，加深记忆。如果有不同看法，欢迎大家一起讨论。
从一个应用场景说起函数传递的使用方法：微信小程序的即时聊天功能，从首页传递一个获取 userInfo 的方法给子组件，onGetUserInfo方法定义在首页，但是在子组件调用，同样可以获取想要的值呢。
子组件：chatroom，传递的函数为 onGetUserInfo。
index.wxml
<chatroom
style="width: 100%; height: 100%"
envId="{{chatRoomEnvId}}"
collection="{{chatRoomCollection}}"
groupId="{{chatRoomGroupId}}"
groupName="{{chatRoomGroupName}}"
userInfo="{{userInfo}}"
onGetUserInfo="{{onGetUserInfo}}" //将函数作为属性传递给子组件
getOpenID="{{getOpenID}}"
></chatroom>
index.js
// 首页定义的获取userinfo的方法
onGetUserInfo: function(e) {
if (!this.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
在chatroom中使用该函数的方法：
chatroom.wxml
<button
open-type="getUserInfo"
bindgetuserinfo="onGetUserInfo"
class="userinfo"
>请先登录后参与聊天</button>
chatroom.js
properties{
onGetUserInfo: {
type: Function,
},
}
methods: {
onGetUserInfo(e) {
this.properties.onGetUserInfo(e)
},
}
为了大家看着方便，省去了大部分冗余代码，只贴出了部分核心代码，如果想要查看详情代码，请移步官网。
