Vue3 获取 Refs 操作 DOM 元素教程

在 Vue3 中，可以使用'ref' 函数来获取 DOM 元素的引用，然后通过调用'value' 属性来访问 DOM 元素。下面是一个示例：

<template>
  <div>
    <input type='text' ref='myInput' />
    <button @click='handleClick'>Click me</button>
  </div>
</template>

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

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

    function handleClick() {
      console.log(myInput.value.value);
    }

    return {
      myInput,
      handleClick
    };
  }
}
</script>

在上面的示例中，我们使用'ref' 函数来创建一个'myInput' 引用，然后将其绑定到输入框上。在'handleClick' 函数中，我们可以通过'myInput.value.value' 访问输入框的值。请注意，我们需要使用两个'.value' 来访问 DOM 元素，因为'ref' 函数返回的是一个包含'value' 属性的对象。

除了访问 DOM 元素的值，我们还可以使用'myInput.value' 来访问 DOM 元素的其他属性和方法。例如，如果我们想在输入框中插入一些文本，可以使用以下代码：

myInput.value.value = 'Hello world!';

需要注意的是，'ref' 函数返回的是响应式的对象，因此如果我们修改了 DOM 元素的属性或方法，Vue 将会自动更新视图。