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.result
this.$apply()
wx.hideLoading();
return
}
wx.hideLoading();
} catch (e) {
console.log(e)
wx.hideLoading();
wx.showToast({ title: '信息获取失败', icon: 'none' });
}
}
async onLoad({id}) {
this.id = id
this.$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 更新页面值
}
}