wepy父组件onload中请求数据,更新.sync动态传值绑定的数据,子组件onload中获取不到值。

Posted A_山水子农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wepy父组件onload中请求数据,更新.sync动态传值绑定的数据,子组件onload中获取不到值。相关的知识,希望对你有一定的参考价值。

  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 更新页面值
  

以上是关于wepy父组件onload中请求数据,更新.sync动态传值绑定的数据,子组件onload中获取不到值。的主要内容,如果未能解决你的问题,请参考以下文章

wepy - 与原生有什么不同(slot插槽)

WePY小程序框架实战四-使用async&await异步请求数据

小程序父子组件onLoad和Created之间的问题

微信小程序组件化开发框架WePY

wepy 小程序开发(Mixin混合)

react 子组件获取父组件传来的 props 问题