一篇文章搞懂Vue3中如何使用ref获取元素节点

下面是一篇详细讲解“一篇文章搞懂Vue3中如何使用ref获取元素节点”的完整攻略。

什么是ref

在Vue3中，ref是一个用于在模板中给元素或子组件注册引用的函数。通过在模板中使用ref来注册引用，我们可以在Vue实例中访问这些元素或子组件，并进行一些操作。

ref的使用方法如下：

<template>
  <div ref="myDiv"></div>
</template>

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

  export default {
    setup() {
      // 使用ref函数返回一个ref对象
      const myDiv = ref(null)

      // 在组件挂载时获取元素节点
      onMounted(() => {
        console.log(myDiv.value)
      })

      return {
        myDiv
      }
    }
  }
</script>

上面代码中，我们通过ref函数创建一个ref对象，并通过模板中的ref属性将其注册为引用。在组件挂载时，我们通过用onMounted函数来获取对应的元素节点。

ref获取元素节点的示例

下面我们来看两个示例，分别演示如何使用ref在Vue3中获取元素节点。

简单的示例

首先，我们用一个简单的示例来演示如何使用ref获取元素节点。

<template>
  <div ref="myDiv">Hello world!</div>
</template>

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

  export default {
    setup() {
      // 使用ref函数返回一个ref对象
      const myDiv = ref(null)

      // 在组件挂载时获取元素节点
      onMounted(() => {
        console.log(myDiv.value)
      })

      return {
        myDiv
      }
    }
  }
</script>

上面代码中，我们在模板中使用ref属性来注册一个引用名为myDiv的元素。

然后，在组件的setup函数中，我们使用ref函数创建一个指向null的ref对象，并将其赋值给变量myDiv。

最后，在组件挂载时，我们使用onMounted函数来获取myDiv的值，即获取到对应的元素节点。这时，我们可以在控制台中看到myDiv的值为一个HTMLDivElement对象。

在Vue3中获取子组件的示例

接下来，我们来演示如何在Vue3中获取子组件的DOM元素。

<template>
  <button @click="handleClick">获取子组件的DOM元素</button>
  <my-component ref="myComponent"></my-component>
</template>

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

  export default {
    setup() {
      // 使用ref函数返回一个ref对象
      const myComponent = ref(null)

      // 在组件挂载时获取元素节点
      onMounted(() => {
        console.log(myComponent.value.$el)
      })

      const handleClick = () => {
        console.log(myComponent.value.$el)
      }

      return {
        myComponent,
        handleClick
      }
    }
  }
</script>

上面代码中，我们在模板中注册了一个子组件，并用ref属性将其注册为引用名为myComponent的子组件。

然后，在组件的setup函数中，我们使用ref函数创建一个指向null的ref对象，并将其赋值给变量myComponent。

接着，在组件挂载时，我们使用onMounted函数来获取myComponent的值，即获取到对应的子组件实例。这时，我们可以通过myComponent.value.$el来获取到子组件的DOM元素。

最后，在模板中我们创建一个按钮，当点击该按钮时，调用handleClick函数来获取子组件的DOM元素。由于在onMounted中已经获取到了子组件实例，所以此时我们可以直接使用myComponent.value.$el来获取到子组件的DOM元素。