Vue3对DOM元素的操作

目前Vue3官方提供了一种访问DOM元素的方法，代码如下：

<template> 
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // DOM 元素将在初始渲染后分配给 ref
        console.log(root.value) // <div>This is a root element</div>
      })

      return {
        root
      }
    }
  }
</script>

该方法也仅限于元素访问，但是想要操作dom元素却无法实现，比如说给某个dom元素添加一个自动触发的单击事件，特别是在自定义文件上传组件的时候，需要将文件上传的input元素给隐藏起来，然后使用一个按钮或图片来实现上传，需要实现对文件上传的input元素进行联动单击操作，这里官方提供的方法就失效了，需要使用如下方法来实现：

<template>
    <div class="upload">
	    <input ref="up" @change="getFile" type="file" v-show="false" />
	    <a-button block @click="toChoose">选择文件</a-button>
    </div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive } from "vue";

export default defineComponent({
    name: "upload",
    setup() {
        const instance = getCurrentInstance();

        const dataset = reactive({
            file_info: ""
        });

        const getFile = (e: any) => {
            dataset.file_info = e.target.files[0];
        };

        const toChoose = () => {
            (instance?.refs.up as HTMLButtonElement).click();
        }

        onMounted(() => {
            
        });

        return {
            toChoose,
            getFile
        }
    }
});
</script>

使用getCurrentInstance函数来获取就没问题了，不知道这样使用安不安全，但是能用！！！

学习分享，一起成长！以上为小编的学习分享，若存在不当之处，请批评指正！