获取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.$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并修改了其样式