Uniapp 和Vue3 小程序 获取页面dom 方法

近来在写公司的小程序项目 技能框架 主要是Uniapp 和 Vue3
恰好有个需求是要 获取小程序页面dom 结构 用常见的vue3获取dom 结构不起效
记录一下
先给出准确答案

1. <template>
2.   <view>
3.     <view>
4.       <view>Html</view>
5.       <view id="target">Css</view>
6.       <view>Javascrip</view>
7.     </view>
8.   </view>
9. </template>
12. <script setup>
13. import { getCurrentInstance } from 'vue';
15. const instance = getCurrentInstance();
17. const query = uni.createSelectorQuery().in(instance);
19. query.select('#target').boundingClientRect(data => {
20.   if (data) {
21.     console.log("获取到布局信息", data);
22.     // 这里返回的data就是我们需要的dom结构
23.   }
24. }).exec();
25. </script>

复制代码

同时记录下错误答案

1. const query = uni.createSelectorQuery().in(this);
2. query.select('#target').boundingClientRect(data => {
3.   console.log(data)
4. }).exec();

复制代码

缺少 getCurrentInstance 导入 会报错 vendor.js? [sm]:2306 TypeError: Cannot read property ‘route’ of undefined

1.   <view>
2.     <view>
3.       <view>Html</view>
4.       <view id="target" ref="cssRef">Css</view>
5.       <view>Javascrip</view>
6.     </view>
7.   </view>
9. import { ref,onMounted,nextTick } from "vue";
11. const cssRef = ref(null);
13. onMounted(() =>{
14.   console.log(cssRef.value)
15. })
17. nextTick(() =>{
18.   console.log(cssRef.value)
19. })

复制代码

常用的vue3 获取dom 元素方法 只会打印null 不会获取到dom结构
由于小程序环境的限定，不能直接在setup函数内部使用ref来获取DOM元素，由于小程序的视图层是由小程序框架管理的，而不是欣赏器的DOM。
还有一种获取dom结构的方法 自界说组件上绑定ref
使用ref获取自界说组件实例： 假如你须要获取的是自界说组件的实例，你可以在自界说组件上使用ref属性，然后在父组件的setup函数中通过ref来获取。

1. // 自定义组件
2. export default {
3.   setup() {
4.     const myComponentRef = ref(null);
6.     return {
7.       myComponentRef
8.     };
9.   }
10. };
12. // 使用自定义组件的父组件
13. <template>
14.   <my-custom-component ref="myComponentRef" />
15. </template>
17. <script>
18. import MyCustomComponent from './MyCustomComponent.vue';
20. export default {
21.   components: {
22.     MyCustomComponent
23.   },
24.   setup() {
25.     const myComponentRef = ref(null);
27.     onMounted(() => {
28.       if (myComponentRef.value) {
29.         // 这里可以访问到自定义组件的实例
30.         console.log(myComponentRef.value);
31.       }
32.     });
34.     return {
35.       myComponentRef
36.     };
37.   }
38. };
39. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。