vue3 setup中如何操作dom

5,890 阅读1分钟

一、通过ref绑定,话不多说,直接上代码。

<template>
    <el-input ref="dom" />
<template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
    setup() { 
        const dom = ref<HTMLElement|null>(null);
        onMounted(()=>{
           dom.value.focus();
        })
        return {
          dom
        }
    }
})
</script>

二、通过函数绑定的方式操作dom

<template>
    <el-input :ref="dom" />
<template/>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
    setup() {       
        let refs: HTMLElement;
        const dom = (el: HTMLElement) => {
                        refs = el;
                      };
         onMounted(() => {
            refs.focus();
         });
         return {
           dom,
         };
     }
})
</script>