wepy的props传值分为静态传值和动态传值，静态传值比较简单，只能传递String字符串类型，不需要修饰符；动态传值需要使用.sync修饰符，如果想子组件向父组件传值，可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了，具体详细介绍看wepyjs prop传值。

  wepy在项目开发中发现在父组件onload中请求数据，更新.sync动态传值绑定的数据，子组件onload中获取不到值。

父组件代码：

<template><view><PersonalInfo :id.sync="id" :personalDetail.sync="personalDetail"></PersonalInfo> </view>
</template>
<script>import wepy from 'wepy';import PersonalInfo from './components/personalInfo'import {ApiHome} from '../../api';export default class baseInfo extends wepy.page {config = {navigationBarTitleText: ''}components = {PersonalInfo}data = {id: '',personalDetail:{}}mixins = []methods = {}async getUserDetailInfo () {try {wx.showLoading({ title: '请稍后...', icon: 'loading', mask: true });let res = await ApiHome.getUserDetailInfo({id: this.id})if (res && res.result) {this.personalDetail = res.resultthis.$apply()wx.hideLoading();return}wx.hideLoading();} catch (e) {console.log(e)wx.hideLoading();wx.showToast({ title: '信息获取失败', icon: 'none' });} }async onLoad({id}) {this.id = idthis.$apply()await this.getUserDetailInfo()}}
</script>

子组件代码：

<template><view></view>
</template><script>import wepy from 'wepy';export default class Index extends wepy.component {props = {id: {type: String,default: ''},personalDetail: {type: Object,default: function () {return {}}}};mixins = []data = {}computed = {}methods = {}events = {}onLoad(option) {console.log('id', this.id)console.log('personalDetail', this.personalDetail)}}
</script>

子组件可以获取到id的值，但是获取不到接口请求传递过来的personalDetail值。

通过控制台输出可以看到子组件onload时，并没有获取到personalDetail值，但是通过查看控制台AppData可以看到数据personalDetail已经传入子组件，对于子组件需要根据父组件传递的personalDetail进行返现，并不能实现，Component只有onload生命周期函数。

解决办法：使用$broadcast事件广播，父组件向各个子组件发送广播事件，子组件接受广播事件进行返现。

父组件发送广播事件：

async getUserDetailInfo () {try {wx.showLoading({ title: '请稍后...', icon: 'loading', mask: true });let res = await ApiHome.getUserDetailInfo({id: this.id})if (res && res.result) {// 发送广播事件this.$broadcast('getPersonalDetail', res.result)wx.hideLoading();return}wx.hideLoading();} catch (e) {console.log(e)wx.hideLoading();wx.showToast({ title: '信息获取失败', icon: 'none' });} }

子组件接收广播事件：

events = {getPersonalDetail(value) {console.log(value)// TODO 更新页面值}
}