vue3如何使用ref获取元素

下面是关于vue3中如何使用ref获取元素的完整攻略：

什么是ref

ref 是 Vue3 中一个新增的 API，可以用来获取/操作组件中的 DOM 元素或者子组件实例。

如何使用ref

在Vue3中，可以通过 ref 对象来获取组件中的DOM元素或子组件实例。获取的方式如下：

<template>
  <div class="el-container" ref="container"></div>
</template>

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

export default {
  setup() {
    const container = ref(null);
    return { container }
  }
}
</script>

如上所示，我们在模板中定义了一个 div 元素，并通过 ref 属性给它取了一个名字，类似于 HTML 标签的 id 和 class 属性。它指向了一个在 setup 函数中定义的 ref 变量。此时的 container 就是一个响应式对象，它跟踪着 DOM 元素的变化，可以用来对 DOM 元素进行操作。

此外，还可以通过编程的方式来设置、更新 ref：

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

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

    setTimeout(() => {
      container.value.innerHTML = 'Hello, World!';
    }, 2000);

    return { container }
  }
}
</script>

我们通过 setTimeout 来修改 container.value 中的数据，从而改变DOM元素的显示。

示例说明

例1：使用 ref 对象获取子组件实例

下面是一个简单的 Parent 组件和 Child 组件，Parent 在模板中引用了 Child 组件，并使用 ref 获取了 Child 组件的实例，然后操作 Child 组件：

<template>
  <div>
    <Child ref="child" />
    <button @click="handleClick">调用子组件方法</button>
  </div>
</template>

<script>
import Child from './Child.vue';
import { ref } from 'vue';

export default {
  components: { Child },
  setup() {
    const childInstance = ref(null);

    const handleClick = () => {
      childInstance.value?.handleClick();
    }

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

在 Parent 中通过import Child from './Child.vue'把子组件引入。 在模板中，使用 <Child ref="child"> 获取 Child 组件的实例，调用 Child 子组件实例的方法可以通过 childInstance.value.子组件中的方法 来实现，如上例中的 childInstance.value?.handleClick()。

例2：使用 ref 对象获取 DOM 元素

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="handleClick">修改文本框的值</button>
  </div>
</template>
<script>
import { ref } from 'vue';

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

    const handleClick = () => {
      inputRef.value.value = '修改后的值';
    }

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

如上面的示例所示，我们通过 ref 获取了文本框的 DOM 元素，然后在按钮的点击事件中，修改了文本框的值。

这两条示例都可以帮助开发者更好地了解 Vue3 如何使用 ref 获取元素，以及在 Vue3 中处理 ref 值的响应式变化。