共计 835 个字符，预计需要花费 3 分钟才能阅读完成。
- 先看一下官网的解释
- 从下面咱们能够晓得 $refs 会返回 dom 或者组件实例或者蕴含前两者的数组，然而有个问题就是一个组件页面里有多个同名的 ref，
Vue会怎么解决呢？
这里我要分出两种状况
非 v -for 渲染的一般元素或组件
- 不是 v -for 渲染进去的同名 ref, 论断是 以 dom 构造为主先是从上到下，而后是从里层到外层找到最初一个对应名称的 ref，如果是原生 dom 返回 dom 元素自身，如果是组件返回组件实例。看上面的例子。
template
result
- 最初发现是拿到了
<HelloWorld>组件的实例，如果删除<HelloWorld>上的 ref 就会拿到 它的里层的ref="one" 的 div因为它是最上面的同名ref，这里有个留神的中央就是插槽必须失效能力拿到插槽中的元素或组件，不然会拿到外层的<HelloWorld> 组件。
v-for 渲染的一般元素或组件
- 第二种状况就是应用
v-for渲染了多个同名ref的元素，首先咱们要把v-for看做一个整体，他同样会遵循第一条的规定，比方在v-for的元素同级上面存在一个同名ref 标签或者组件，$refs就会拿到上面的 dom 或者组件实例，如果返过去就是拿到v-for的元素数组。 - 而后咱们看只有
v-for的状况，下面说到数组，当咱们用ref去取v-for中的元素的时候返回的是数组不论外面是不是有没有多个同名ref元素，看下图。
template
result
- 当
v-for中没有重名ref时会返回只有一条数据的数组，所以只有获取v-for中的ref就必然会拿到一个数组，所以在解决数据的时候要留神。看下图，咱们应用index动静渲染ref保障了ref的惟一。
template
result
- 接下来讨论一下
v-for ref获取的元素的程序问题，咱们来看呈现多层级同名ref的状况，简略来说 从里到外，从上到下。看下图。
template
result
- 再来看看
v-for蕴含组件的时候是否有什么区别，看下图。
template
result
- 能够看到也是遵循上述规定的。
正文完