Vue 3 + TS (TypeScript): 获取单个或多个 DOM 元素的方法

2023-11-18 22:12:03

如何使用 Vue 3 和 TypeScript 获取 DOM 元素：一个深入指南

简介

Vue.js 是一个流行的前端框架，以其简单性和灵活性而闻名。Vue 3 中引入的 ref 指令允许开发者在组件内访问和操作 DOM 元素。TypeScript 是一种 JavaScript 超集，提供了一个类型系统，使代码更加健壮和可维护。本指南将探讨如何使用 Vue 3 和 TypeScript 获取单个或多个 DOM 元素，深入探究 ref 指令的强大功能。

获取单个元素

ref 最基本的使用是获取单个 DOM 元素。通过将 ref 属性分配给一个变量，我们可以访问该元素的 DOM 节点。例如：

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

<script>
export default {
  mounted() {
    const myElement = this.$refs.myElement as HTMLDivElement;
    console.log(myElement);
  },
};
</script>

获取多个元素

要获取多个 DOM 元素，可以将 ref 属性分配给一个数组变量。这样做会返回一个 DOM 元素数组，允许我们访问单个元素。

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

<script>
export default {
  mounted() {
    const myElements = this.$refs.myElements as HTMLDivElement[];
    console.log(myElements);
  },
};
</script>

高级用法

除了获取 DOM 元素外，ref 还提供了一些高级用法：

访问组件实例： 通过将 ref 分配给组件实例，我们可以访问该组件的内部状态和方法。

<template>
  <my-component ref="myComponent"></my-component>
</template>

<script>
export default {
  mounted() {
    const myComponent = this.$refs.myComponent as MyComponent;
    console.log(myComponent.data);
  },
};
</script>

访问子组件： 我们可以使用 ref 访问组件内的子组件。

<template>
  <my-component>
    <child-component ref="myChildComponent"></child-component>
  </my-component>
</template>

<script>
export default {
  mounted() {
    const myChildComponent = this.$refs.myChildComponent as ChildComponent;
    console.log(myChildComponent.props);
  },
};
</script>

访问元素属性和方法： ref 可以用于访问 DOM 元素的属性和方法。

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

<script>
export default {
  mounted() {
    const myElement = this.$refs.myElement as HTMLDivElement;
    console.log(myElement.getAttribute("id"));
    myElement.focus();
  },
};
</script>