Skip to content

Vue3的setup中使用ref获取dom元素

背景问题

  • 在vue3中input如何获取焦点?
  • vue3 setup语法糖如何获取dom元素?

vue2 的方法

在 vue2 中,在组件上设置 ref 属性之后,就可以通过 this.$refs.ref 访问到对应的 DOM 元素。

<input type="text" ref="inputRef" />

在 JavaScript 中可以访问:

this.$refs.usernameInput

如果需要聚焦到输入框:

this.$refs.usernameInput.focus()

vue3

vue3 中没有 $refs,而且没有 this,可以使用 ref() API 来实现:

<template>
  <input type="text" ref="inputRef" />
  <span @click="handleFocus">focus</span>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const inputRef = ref();

console.log(inputRef.value); // undefined!页面元素尚未渲染

onMounted(() => {
  console.log(inputRef.value); // 可以拿到 input 元素!
});

const handleFocus = () => {
  inputRef.value.focus(); // 成功聚焦
};
</script>

如果是多个 input 元素呢?

如果每个输入框对应一个 focus 按钮,那我们可以把它们封装成一个 Vue 组件,这样每个组件中就只有一个 input 啦!

另外,可以通过数组来实现:

<template>
  <div v-for="(item, index) in data">
    <input type="text" :ref="inputRef" />
    <span @click="handleFocus(index)">focus</span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const data = [1, 2, 3, 4, 5];

const refArr = ref([]);
const inputRef = (el) => {
  refArr.value.push(el);
};

const handleFocus = (index) => {
  refArr.value[index].focus();
};
</script>

领支付宝红包:打开支付宝搜索 726845401

领饿了么红包:0fυィ直文本 e:/$XGzEgR8$~.👉饿了么App👈【快來領外賣紅包,最高20元,人人都有哦~】

 

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

发表评论

Your email is never published nor shared. Required fields are marked *


TOP