如何在Vue中访问嵌套的子$refs？

你尝试的this.$refs.lorem.$refs.ipsum写法不生效，原因是：当ref绑定在普通DOM元素上时，this.$refs.lorem获取到的是原生DOM节点，而原生DOM对象并没有$refs属性——$refs是Vue组件实例特有的属性。

下面提供两种可靠的解决方法：

方法一：通过DOM查询直接获取子元素 #

给子元素添加类名，然后利用父DOM节点的querySelector方法定位：

修改模板：

<template>
  <div ref="lorem">
    <div ref="ipsum" class="ipsum-child"></div>
  </div>

  <div ref="dolor">
    <div ref="ipsum" class="ipsum-child"></div>
  </div>
</template>

在mounted中获取：

mounted() {
  console.log(this.$refs.lorem.querySelector('.ipsum-child')) // 对应lorem下的ipsum
  console.log(this.$refs.dolor.querySelector('.ipsum-child')) // 对应dolor下的ipsum
}

方法二：将父容器封装为组件 #

如果希望保留$refs的访问方式，可以把每个包含子ref的父容器封装成独立组件：

1. 创建子组件（比如IpsumWrapper.vue） #

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

<script>
export default {
  // 可选：暴露子ref给父组件，更符合组件封装规范
  get ipsumElement() {
    return this.$refs.ipsum
  }
}
</script>

2. 在父组件中使用 #

<template>
  <IpsumWrapper ref="lorem"></IpsumWrapper>
  <IpsumWrapper ref="dolor"></IpsumWrapper>
</template>

<script>
import IpsumWrapper from './IpsumWrapper.vue'

export default {
  components: { IpsumWrapper },
  mounted() {
    // 直接通过组件实例的$refs访问
    console.log(this.$refs.lorem.$refs.ipsum)
    // 或者通过暴露的属性访问（推荐）
    console.log(this.$refs.lorem.ipsumElement)
  }
}
</script>

这样就能精准区分不同父容器下的同名子ref了。

内容的提问来源于stack exchange，提问作者MathAdams