vue中this.$refs的坑及解决

在Vue的开发过程中，我们通过this.$refs来访问DOM元素或子组件实例。但是在使用的过程中，这个特性也有一些坑点需要我们注意。接下来我会详细讲解这些坑点以及如何解决它们。

坑点1：this.$refs在初始化时可能为空

在组件的生命周期中，created钩子函数是在组件的数据和方法都准备就绪，但是DOM并不一定已经准备好了。因此，当我们在created钩子函数中使用this.$refs时，可能获取不到DOM元素或子组件实例，因为这时它们还没有被渲染。

为了解决这个问题，我们可以在组件的mounted钩子函数中使用this.$nextTick()来确保DOM已经被渲染完毕。下面是一个示例：

<template>
  <div ref="myDiv">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  created() {
    console.log(this.$refs.myDiv) // 输出 undefined
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.$refs.myDiv) // 输出 <div> Hello, Vue! </div>
    })
  }
}
</script>

坑点2：this.$refs可能是一个对象或数组

当我们在模板中给DOM元素或子组件设置了ref，this.$refs会返回一个对象或数组，具体取决于我们如何设置ref的值。

当我们在DOM元素上设置ref时，this.$refs返回的是一个对象，对象的键是我们设置的ref的值，值是对应的DOM元素的引用。例如：

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv) // 输出 <div></div>
  }
}
</script>

当我们在子组件上设置ref时，this.$refs返回的是一个数组，数组的每个元素是对应的子组件实例的引用。例如：

<template>
  <div>
    <child-component ref="myChildComponents"></child-component>
    <child-component ref="myChildComponents"></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.myChildComponents) // 输出数组 [ChildComponent实例1, ChildComponent实例2]
  }
}
</script>

这个数组的顺序是在模板中声明子组件时的顺序，因此需要注意。如果我们在模板中通过v-for循环创建了多个子组件，并给它们设置了相同的ref，那么this.$refs会返回所有子组件的实例。因此，需要根据实际情况决定如何使用this.$refs。

解决方法

为了解决这些坑点，我们需要注意以下几点：

• 尽量避免在created钩子函数中使用this.$refs，而是在mounted钩子函数中使用。
• 当我们需要在模板中通过v-for循环创建多个子组件，并给它们设置相同的ref时，需要使用this.$refs来访问子组件实例时，我们可以使用Array.from()方法将this.$refs转换成数组，然后通过数组访问每个子组件实例。

下面是一个示例：

<template>
  <div>
    <child-component v-for="(item, index) in list" :key="index" ref="myChildComponents"></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  mounted() {
    const myChildComponents = Array.from(this.$refs.myChildComponents)
    myChildComponents.forEach((component, index) => {
      console.log(`子组件${index + 1}的属性值为：${component.prop}`)
    })
  }
}
</script>

在这个示例中，我们在模板中通过v-for循环创建了多个子组件，并给它们设置相同的ref。然后我们使用Array.from()方法将this.$refs转换成数组，再通过数组访问每个子组件实例。这样，我们就解决了在访问多个子组件实例时可能产生的问题。