vue中的ref是什么意思

vue 中的 ref 特性让开发者能访问组件的 dom 元素或实例。用途包括：直接操作 dom 元素，如设置焦点或获取值。访问组件实例，获取数据或调用方法。在组件间建立关系，如父子通信。

Vue 中的 ref

ref 是 Vue.js 中一个重要的特性，它允许开发者访问组件的 DOM 元素或实例。

用途

ref 可以用于以下场景：

立即学习“前端免费学习笔记（深入）”；

• 直接操作 DOM 元素，例如设置焦点或获取它的值。
• 访问组件实例，例如获取它的数据或调用它的方法。
• 在组件之间建立关系，例如使用引用来创建父子组件通信。

语法

ref 可以通过以下方式使用：

<template><input ref="myInput"></template><script> export default {   mounted() {     // 获取 DOM 元素     this.$refs.myInput.focus();   } }; </script>

赋值

ref 被赋值为组件的 DOM 元素或实例，这取决于它是用于模板还是脚本。

• 在模板中，ref 引用 DOM 元素。
• 在脚本中，ref 引用组件实例。

访问

可以通过 $refs 对象访问 ref：

this.$refs.myInput // 返回 DOM 元素 this.$refs.myComponent // 返回组件实例

注意

• ref 的名称必须是唯一的。
• 只能在 DOM 渲染完成后使用 ref。
• ref 不能用于异步组件或函数式组件。