vue3怎么获取ref

百变鹏仔 3个月前 (10-30) #前端问答

文章标签 ref

在 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>// 获取 refconst myRef = this.$refs.myRef.value;

2. 使用 .el 访问 Vue 实例自身（仅适用于组件）：

// 模板中使用 ref<my-component ref="myRef"></my-component>// 获取 refconst myRef = this.$refs.myRef.el;

3. 使用 .children 访问所有子组件（仅适用于组件）：

// 模板中使用 ref<my-component ref="myRef"><child-component></child-component></my-component>// 获取 refconst childRef = this.$refs.myRef.children[0];

4. 使用 unref 函数（需要使用 Composition API）：

// 模板中使用 ref<div ref="myRef"></div>// 获取 refimport { unref } from 'vue';const myRef = unref(this.$refs.myRef);

注意：

文章推荐