uni-app 中父类传递值给组件时，组件props接受后部分较大的数据无法获取到？

uni-app 中父类传递值给组件时，组件props接受后部分较大的数据无法获取到？

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win7
HBuilderX 正式
HBuilderX版本号 2.9.8
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 荣耀10
页面类型 vue
打包方式 离线
项目创建方式 HBuilderX

操作步骤：

  • 父类传递值给组件

预期结果：

  • 组件this中应该存在传递的值

实际结果：

  • 部分有值，部分较大的数据用this没获取到值，在mounted或者created中

bug描述：

uniapp 中父类传递值给组件，组件props接受后部分较大的数据无法获取到？我传递的数据是一个较大的对象，对象中有上百个属性， 传递的数据在mounted或者created中用this没获取到值。


更多关于uni-app 中父类传递值给组件时，组件props接受后部分较大的数据无法获取到？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

传递的props属性，会经过一次JSON.stringify。不能被序列化的数据会消失

更多关于uni-app 中父类传递值给组件时，组件props接受后部分较大的数据无法获取到？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


JSON.stringify的目的是什么

在 uni-app 中，当父组件向子组件传递较大的对象数据时，如果子组件在 mounted 或 created 钩子中通过 this 访问 props 数据时部分数据未获取到，通常是由于数据传递的异步性导致的。当传递的数据量较大时，父组件的数据可能还未完全初始化或传递到子组件，子组件的生命周期钩子就已经执行。

建议在子组件中使用 watch 监听 props 的变化，确保在数据完全传递后再进行操作。例如：

export default {
  props: ['largeData'],
  watch: {
    largeData: {
      handler(newVal) {
        if (newVal) {
          // 在这里处理数据
          console.log('数据已接收:', newVal);
        }
      },
      immediate: true // 立即触发一次
    }
  }
};
回到顶部