- 先看一下官网的解释
- 从下面咱们能够晓得 $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
- 能够看到也是遵循上述规定的。