前端 - 使用参数动态确定this.$refs的引用？

Question

this.$refs.XX,XX部分希望是不确定的，根据传入参数确定，这个怎么实现？

使用模板语法this.$refs.${XX},报错

Answer 1

this.$refs[xx]

Answer 2

在 Vue.js 中，你不能直接在 this.$refs 后面使用模板字符串来动态引用一个 ref。this.$refs 是一个对象，其属性名是在模板中定义的 ref 名称，其值是对应的 DOM 元素或子组件实例。

当你尝试使用 this.$refs.${XX}` 这样的语法时，JavaScript 会尝试查找一个名为 ${XX} 的属性，而不是将 XX 的值作为属性名来查找。因此，你会得到一个 undefined`，而不是你期望的 ref。

但是，你可以使用方括号（[]）语法来动态访问对象的属性。因此，你可以使用 this.$refs[XX] 来动态引用一个 ref，其中 XX 是一个变量，其值是你想要引用的 ref 的名称。

下面是一个简单的例子，展示了如何在 Vue 组件中动态使用 this.$refs：

<template>  <div>    <button ref="buttonRef">Click me</button>    <button @click="focusButton">Focus the button</button>  </div></template><script>export default {  methods: {    focusButton() {      const refName = 'buttonRef'; // 你可以将这里替换为一个变量，其值是根据你的需求确定的      this.$nextTick(() => { // 确保 DOM 已经更新        this.$refs[refName].focus();      });    }  }}</script>

在这个例子中，我们有一个按钮，其 ref 被设置为 "buttonRef"。然后，我们有一个方法 focusButton，当被调用时，它会使用 this.$refs[refName] 来引用这个按钮，并调用其 focus 方法。

注意，你需要确保在尝试访问 this.$refs 中的某个 ref 时，该 ref 已经被渲染到 DOM 中。这通常意味着你需要在 Vue 的生命周期钩子 mounted 或 updated 中，或者在 this.$nextTick 的回调中访问它。在上述例子中，我们使用了 this.$nextTick 来确保在尝试访问 ref 时，DOM 已经更新。