vue3获取dom元素的方法

// 在 Vue 3 中获取 DOM 元素的方法主要有两种：使用 ref 和使用 $refs。

// 方法一：使用 ref
<template>
  <div>
    <p ref="myElement">这是一个段落。</p>
    <button @click="getElement">点击获取元素</button>
  </div>
</template>

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

export default {
  setup() {
    const myElement = ref(null);

    const getElement = () => {
      console.log(myElement.value); // 这里可以访问到 DOM 元素
    };

    return {
      myElement,
      getElement
    };
  }
};
</script>

// 解释说明：
// 1. 使用 ref 定义一个响应式引用 myElement。
// 2. 在模板中通过 ref="myElement" 绑定到 DOM 元素。
// 3. 在 setup 函数中定义一个方法 getElement，当按钮被点击时调用该方法。
// 4. 在 getElement 方法中可以通过 myElement.value 获取到真实的 DOM 元素。

// 方法二：使用 $refs（不推荐在组合式 API 中使用）
<template>
  <div>
    <p ref="myElement">这是一个段落。</p>
    <button @click="getElement">点击获取元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    getElement() {
      console.log(this.$refs.myElement); // 这里可以访问到 DOM 元素
    }
  }
};
</script>

// 解释说明：
// 1. 在模板中通过 ref="myElement" 绑定到 DOM 元素。
// 2. 在 methods 中定义一个方法 getElement，当按钮被点击时调用该方法。
// 3. 在 getElement 方法中可以通过 this.$refs.myElement 获取到真实的 DOM 元素。
// 注意：$refs 是选项式 API 的一部分，在组合式 API 中推荐使用 ref 来获取 DOM 元素。