uni-app 使用V3编译器

uni-app 使用V3编译器

详细问题描述

UniApp使用V3编译器，在onload使用this.$refs.x报错或提示找不到组件，切换为自定义组件模式无此问题

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

[内容]

重现步骤

[步骤]

[结果]

[期望]

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

IDE运行环境说明

项目 信息
IDE版本号 [IDE版本号]
windows版本号 [windows版本号]
mac版本号 [mac版本号]

uni-app运行环境说明

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

App运行环境说明

项目 信息
Android版本号 [Android版本号]
iOS版本号 [iOS版本号]
手机型号 [手机型号]
模拟器型号 [模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]


更多关于uni-app 使用V3编译器的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

并非Bug，此表现与H5一致。v3的生命周期更加规范，先创建父，后创建子，此时子组件未创建。

更多关于uni-app 使用V3编译器的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请在onReady里边访问this.$refs

这是V3编译器的一个常见问题，主要原因是组件尚未挂载完成时访问$refs导致的。建议的解决方案：

  1. 使用nextTick延迟访问：
onLoad() {
  this.$nextTick(() => {
    console.log(this.$refs.x)
  })
}
  1. 或者改用mounted生命周期钩子：
mounted() {
  console.log(this.$refs.x)
}
  1. 如果必须在onLoad中使用，可以添加v-if条件确保组件已渲染：
<component v-if="isMounted" ref="x"></component>

data() {
  return {
    isMounted: false
  }
},
onLoad() {
  this.isMounted = true
  this.$nextTick(() => {
    console.log(this.$refs.x)
  })
}
回到顶部