uni-app H5端 this.$children[0]下的实例对象中不包含data中声明的变量（微信小程序端有）

uni-app H5端 this.$children[0]下的实例对象中不包含data中声明的变量（微信小程序端有）

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

内容: 页面结构 父级页面 => 子组件

重现步骤

  • 在父级页面打印 this.$children
    • 在微信小程序端可以获取到 子组件的 data 中申明的变量
    • H5端就不存在了
    • (this.$parent有同样的错误)
    • H5端：

image

  • 微信小程序端：

image

结果

希望可以实现微信小程序和H5端效果一致

期望

如果语言难以表述清晰，拍一个视频或截图，有图有真相

IDE运行环境说明

信息 内容
IDE [HBuilder 或 HBuilderX]
IDE版本号 [IDE版本号]
windows版本号 [windows版本号]
mac版本号 [mac版本号]

uni-app运行环境说明

信息 内容
运行端 [运行端是h5或app或某个小程序？]
运行端版本号 [运行端版本号]
项目创建方式 [项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
编译模式 [编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

信息 内容
Android版本号 [Android版本号]
iOS版本号 [iOS版本号]
手机型号 [手机型号]
模拟器型号 [模拟器型号]

附件

  • [IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
  • [App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
  • [App安装包或H5地址]
  • [可重现代码片段]

联系方式

  • [QQ]

更多关于uni-app H5端 this.$children[0]下的实例对象中不包含data中声明的变量（微信小程序端有）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你仔细看H5下面的你展开的对象其实是view组件 你再展开view组件的子组件才能看到你的
这点在小程序上是有不同的：小程序端（以及App端）的 view 组件是框架内置的不是 Vue 组件实例，所以看不到。
这是由于架构差异导致的，暂时不会改动。

更多关于uni-app H5端 this.$children[0]下的实例对象中不包含data中声明的变量（微信小程序端有）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的 感谢回答


还是感觉有点怪异。。。

这是uni-app在H5端和小程序端的实现差异导致的正常现象。H5端使用的是Vue.js原生的组件实例访问方式，而小程序端做了特殊处理。

在H5端：

  1. 直接访问this.$children[0]获取的是Vue组件实例
  2. 需要通过this.$children[0].$data才能访问到data中声明的变量
  3. 这是Vue.js的标准行为

在小程序端：

  1. uni-app做了特殊处理，将data变量直接挂载到组件实例上
  2. 所以可以直接通过this.$children[0].xxx访问

解决方案：

  1. 统一使用this.$children[0].$data.xxx方式访问data变量
  2. 或者使用refs方式获取组件实例
  3. 这是预期的平台差异，不是bug

建议使用refs方式更规范：

// 模板
<child-component ref="child"></child-component>

// 代码
this.$refs.child.$data.xxx
回到顶部