uni-app subView引用vue组件时，vue组件使用uni.createSelectorQuery出错

uni-app subView引用vue组件时，vue组件使用uni.createSelectorQuery出错

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
Android Android 11
小米
红米note11pro
nvue vue2

示例代码：

var query = uni.createSelectorQuery().in(this);
query.select('#doc').boundingClientRect();
query.exec((e)=>{
console.log(e)
})

操作步骤：

var query = uni.createSelectorQuery().in(this);
query.select('#doc').boundingClientRect();
query.exec((e)=>{
console.log(e)
})

预期结果：

返回边界距离

实际结果：

Converting circular structure to JSON
–> starting at object with constructor ‘Nn’
— property ‘_renderProxy’ closes the circle

bug描述：

subView引用vue组件，vue组件使用uni.createSelectorQuery出错， 在nvue中引用vue组件正常
Converting circular structure to JSON
–> starting at object with constructor ‘Nn’
— property ‘_renderProxy’ closes the circle


更多关于uni-app subView引用vue组件时，vue组件使用uni.createSelectorQuery出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

nvue中好像没有办法这样子获取

更多关于uni-app subView引用vue组件时，vue组件使用uni.createSelectorQuery出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 subView 中引用 Vue 组件时，uni.createSelectorQuery().in(this) 的上下文 this 指向可能存在问题。由于 subView 的特殊渲染机制，Vue 组件的实例与常规页面环境不同，导致 createSelectorQuery 无法正确获取节点信息。

解决方案：

  1. 延迟执行查询：在 mounted 或 nextTick 中执行查询，确保组件已渲染完成。

    mounted() {
  this.$nextTick(() => {
    const query = uni.createSelectorQuery().in(this);
    query.select('#doc').boundingClientRect(data => {
      console.log(data);
    }).exec();
  });
}

  2. 避免使用 .in(this)：在 Vue 组件中直接使用 uni.createSelectorQuery()，不指定上下文。

    const query = uni.createSelectorQuery();
query.select('#doc').boundingClientRect(data => {
  console.log(data);
}).exec();

  3. 使用 ref 替代选择器：通过 Vue 的 ref 获取组件实例，再通过 $el 获取节点信息。

    <template>
  <view ref="doc"></view>
</template>
<script>
export default {
  mounted() {
    const el = this.$refs.doc?.$el;
    if (el) {
      // 直接操作 el
    }
  }
}
</script>
回到顶部