Vue中通过ref获取元素详解_通过_Vue会为这些元素生成一个包含所有引用的数组

作者：网络发烧程序猿 | 发布时间：2025-06-30 |

在Vue的模板中，你可以给任何DOM元素或子组件添加一个特殊的属性，这个属性叫做ref。它的值是一个标识符，用来在Vue实例中引用这个元素或组件。

比如，你可以这样给一个按钮添加ref属性：

<button ref="myButton">点击我</button>

在Vue实例中，你可以通过`this.$refs`来访问带有ref属性的元素或组件。`this.$refs`是一个对象，其中的键是ref属性的值，值是对应的DOM元素或组件实例。

例如，在Vue实例的方法中，你可以这样访问上面的按钮：

methods: {

  sayHello() {

    alert(this.$refs.myButton.innerText);

  }

}

为了确保DOM元素已经被渲染，通常在生命周期钩子如`mounted`中进行操作。

比如，你可以在`mounted`钩子中设置按钮的文本：

mounted() {

  this.$refs.myButton.innerText = '我已经被修改了';

}

如果你需要获取一组相同类型的元素，可以为它们都添加相同的ref属性。Vue会为这些元素生成一个包含所有引用的数组。

例如，为三个按钮添加ref属性，并访问它们：

<button ref="button1">按钮1</button>

<button ref="button2">按钮2</button>

<button ref="button3">按钮3</button>

methods: {

  alertButtons() {

    this.$refs.button1.innerText;

    this.$refs.button2.innerText;

    this.$refs.button3.innerText;

  }

}

有时候你可能需要根据条件动态绑定ref属性。你可以使用`:ref`或`v-ref`指令来实现。

例如，根据某个值动态绑定ref属性：

<button :ref="dynamicRef">动态绑定按钮</button>

data() {

  return {

    dynamicRef: 'dynamicButton'

  }

}

通过ref属性获取DOM元素的步骤包括：1、在模板中为元素添加ref属性，2、通过this.$refs访问该元素，3、在Vue实例的生命周期钩子中操作该元素。合理使用ref属性可以大大提高Vue应用的灵活性和可维护性。