获取dom元素
vue3获取dom元素和vue2类似，都是通过ref来获取，请看以下示例：
①元素中通过ref获取元素boxOneRef
②state中创建boxOneRef属性
③重新创建变量boxOneProxy，并赋值为state.boxOneRef,使之成为state.boxOneRef的代理对象（因为state.boxOneRef属于proxy对象，必须通过代理对象来修改其内部属性）
④通过boxOneRefProxy.style修改dom元素样式
<template> <div class="page relative-page"> <div class="box-one" ref="boxOneRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, reactive, toRefs } from 'vue'; export default defineComponent({ name: 'Index', // 注册组件 components: { TabBar, }, setup() { const state = reactive<any>({ boxOneRef: null, }) onMounted(() => { console.log(state.boxOneRef) const boxOneProxy: any = state.boxOneRef; // 必须要赋值,因为state.boxOneRef是一个Proxy对象,必须通过代理对象来修改其内部属性 boxOneRefProxy.style.zIndex = 9; // 通过代理对象修改dom元素样式 }); return { ...toRefs(state), }; }, }); </script> <style lang="scss" scoped> @import './Index.scss'; </style>
可以看得到成功获取到boxOne并修改了其样式
获取子组件的dom元素
vue3获取子组件的dom元素也和vue2类似，都是通过ref来获取，请看以下示例：
①元素中通过ref获取子组件TabBar
②state中创建tabBarRef属性
③重新创建变量tabBarRefProxy，并赋值为state.tabBarRef,使之成为state.tabBarRef的代理对象（因为state.tabBarRef属于proxy对象，必须通过代理对象来修改其内部属性）
④通过tabBarRefProxy.e l 获 取 到 子 组 件 d o m ⑤ 通 过 t a b B a r R e f P r o x y . el获取到子组件dom ⑤通过tabBarRefProxy.el获取到子组件dom⑤通过tabBarRefProxy.el.style修改dom元素样式
<template> <div class="page relative-page"> <TabBar ref="tabBarRef" /> </div> </template> <script lang="ts"> import { defineComponent, onMounted, reactive, toRefs } from 'vue'; import TabBar from '@/component/TabBar/TabBar.vue'; export default defineComponent({ name: 'Index', // 注册组件 components: { TabBar, }, setup() { const state = reactive<any>({ tabBarRef: null, // 底部导航栏组件 }) onMounted(() => { const tabBarRefProxy: any = state.tabBarRef; // 必须要赋值,因为state.tabBarRef是一个Proxy对象,必须通过代理对象来修改 tabBarRefProxy.$el.style.zIndex = 9; // 通过tabBarRefProxy.$el获取到子组件dom，并通过tabBarRefProxy.$el.style修改dom样式 }); return { ...toRefs(state), }; }, }); </script> <style lang="scss" scoped> @import './Index.scss'; </style>
可以看得到成功获取到子组件TabBar的真实dom并修改了其样式
