vue3通过ref获取dom节点

<template>
  <div>
    <p ref="myParagraph">这是一个段落。</p>
    <button @click="getDOMElement">获取DOM节点</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个ref来引用DOM元素
    const myParagraph = ref(null);

    // 定义一个方法来获取DOM节点并输出到控制台
    const getDOMElement = () => {
      console.log(myParagraph.value); // 输出DOM节点
    };

    // 在组件挂载后，确保ref已经指向了正确的DOM元素
    onMounted(() => {
      console.log('组件已挂载，ref已准备好:', myParagraph.value);
    });

    return {
      myParagraph,
      getDOMElement,
    };
  },
};
</script>

解释说明：

1. 模板部分：

   • 使用 ref="myParagraph" 来标记需要引用的 DOM 元素（在这个例子中是一个 <p> 标签）。
   • 添加一个按钮，点击时调用 getDOMElement 方法。

2. 脚本部分：

   • 使用 ref 函数创建一个响应式的引用 myParagraph，初始值为 null。
   • 定义 getDOMElement 方法，在点击按钮时会将 myParagraph 引用的 DOM 元素打印到控制台。
   • 使用 onMounted 生命周期钩子，在组件挂载完成后执行一些逻辑，确保 ref 已经正确指向了 DOM 元素。

3. 返回内容：

   • 将 myParagraph 和 getDOMElement 返回给模板使用。