插件窝 干货文章 vue3怎么获取ref

vue3怎么获取ref

strong ref myRef 使用 761    来源:    2024-10-21
在 vue 3 中获取 ref 方法有四种:通过 .value 访问元素的 dom 节点通过 .el 访问 vue 实例自身(组件)通过 .children 访问所有子组件(组件)通过 unref 函数(composition api)获取引用值

如何获取 Vue 3 中的 ref

方法:

在 Vue 3 中,可以通过以下几种方法获取 ref:

1. 使用 .value 访问元素的 DOM 节点:

立即学习“前端免费学习笔记(深入)”;

// 模板中使用 ref
<div ref="myRef"></div>

// 获取 ref
const myRef = this.$refs.myRef.value;

2. 使用 .el 访问 Vue 实例自身(仅适用于组件):

// 模板中使用 ref
<my-component ref="myRef"></my-component>

// 获取 ref
const myRef = this.$refs.myRef.el;

3. 使用 .children 访问所有子组件(仅适用于组件):

// 模板中使用 ref
<my-component ref="myRef"><child-component></child-component></my-component>

// 获取 ref
const childRef = this.$refs.myRef.children[0];

4. 使用 unref 函数(需要使用 Composition API):

// 模板中使用 ref
<div ref="myRef"></div>

// 获取 ref
import { unref } from 'vue';
const myRef = unref(this.$refs.myRef);

注意:

  • ref 必须在模板中定义,可以通过 ref 属性或 v-bind:ref 指令。
  • 如果 ref 未定义,this.$refs.myRef 将返回 undefined。
  • 使用 unref 函数时,需要确保 ref 值为可变的,否则可能会导致响应式丢失。