自定义组件中使用boundingClientRect在微信小程序中返回为null

[jingping-ye]

问题描述 自定义组件中使用boundingClientRect在微信小程序中返回为null 复现步骤 [复现问题的步骤]

1. 创建一个自定义组件
2. 为一个元素创建id选择器
3. 使用boundingClientRect获取该节点的信息

// testComp.js

<template>
  <view class="test-comp">
    <view @click="clickMe" id="test">测试组件</view>
  </view>
</template>

<script>
export default {
  methods: {
    clickMe() {
      let NodesRef = uni.createSelectorQuery().select("#test");
      console.log("theNode", NodesRef);
      NodesRef.boundingClientRect((data) => {
        console.log("得到布局位置信息" + JSON.stringify(data));
      }).exec();
    },
  },
};
</script>

[或者可以直接贴源代码]

预期结果 获取到节点信息

实际结果

NodesRef o {_selectorQuery: e, _component: null, _selector: "#test", _single: true}
TestComp.vue:14 得到布局位置信息null

系统信息:

• 发行平台: 微信小程序
• 操作系统 :微信开发者工具
• HBuilderX版本:使用的Vue-CLI
• uni-app版本 [如使用Vue-cli创建/运行项目，则提供npm run info的运行结果]

uni-app v2.9.8
uni-app cli v2.0.0-29820201110001

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.15.1 - D:\installed\resource\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - D:\installed\resource\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @dcloudio/types: * => 2.0.18 
    @dcloudio/uni-app-plus: ^2.0.0-29820201110001 => 2.0.0-29820201110001   
    @dcloudio/uni-app-plus-nvue:  0.0.1 
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1 
    @dcloudio/uni-automator: ^2.0.0-29820201110001 => 2.0.0-29820201110001  
    @dcloudio/uni-cli-shared: ^2.0.0-29820201110001 => 2.0.0-29820201110001 
    @dcloudio/uni-h5: ^2.0.0-29820201110001 => 2.0.0-29820201110001         
    @dcloudio/uni-helper-json: * => 1.0.9 
    @dcloudio/uni-migration: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-360: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-alipay: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-baidu: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-qq: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-toutiao: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-mp-vue: ^2.0.0-29820201110001 => 2.0.0-alpha-29920201203001
    @dcloudio/uni-mp-weixin: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-quickapp-native: ^2.0.0-29820201110001 => 2.0.0-alpha-29920201203001
    @dcloudio/uni-quickapp-webview: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-stat: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-template-compiler: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/uni-ui: ^1.2.9 => 1.2.9
    @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/vue-cli-plugin-uni: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/webpack-uni-mp-loader: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @dcloudio/webpack-uni-nvue-loader:  0.0.1
    @dcloudio/webpack-uni-pages-loader: ^2.0.0-29820201110001 => 2.0.0-29820201110001
    @hap-toolkit/dsl-vue:  0.6.13
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.9
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.9
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.9
    @vue/cli-plugin-router:  4.5.9
    @vue/cli-plugin-vuex:  4.5.9
    @vue/cli-service: ~4.5.0 => 4.5.9
    @vue/cli-shared-utils:  4.5.9
    @vue/component-compiler-utils:  3.2.0 (3.2.0)
    @vue/preload-webpack-plugin:  1.1.2
    @vue/shared: ^3.0.0 => 3.0.4
    @vue/web-component-wrapper:  1.2.0
    mpvue-page-factory:  1.0.1
    mpvue-template-compiler:  1.0.13
    uni-h5-vue:  2.6.10
    uni-mp-vue:  2.6.10
    vue: ^2.6.11 => 2.6.12
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.5 (16.1.0, 15.9.5)
    vue-router:  3.0.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12 (2.6.12)
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.2.0 => 3.6.0
    vuex-persistedstate: ^4.0.0-beta.1 => 4.0.0-beta.1
  npmGlobalPackages:
    @vue/cli: Not Found

• 设备信息 [如 iPhone8 Plus]: 微信小程序

补充信息 未知，但是通过ISSUE #949的方式可以解决，但是这是个vue页面，而非nvue，这是不同。另外，在页面中可以获取到节点信息，而在自定义组件中不行。

[Haoz03]

修改为：let NodesRef = uni.createSelectorQuery().in(this).select("#test");

[yuconora]

自定义组件里面可以尝试使用

let NodesRef = this.createSelectorQuery().select("#test");

[jingping-ye]

自定义组件里面可以尝试使用

let NodesRef = this.createSelectorQuery().select("#test");

很好用，谢谢

[jingping-ye]

修改为：let NodesRef = uni.createSelectorQuery().in(this).select("#test");

很好用，谢谢。

[overdev-l]

修改为：let NodesRef = uni.createSelectorQuery().in(this).select("#test");

很好用，谢谢。

vue3 setup怎么使用呢？