乐趣区

关于vue.js:关于vue2的Ref的特点

  • 先看一下官网的解释
  • 从下面咱们能够晓得 $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

  • 能够看到也是遵循上述规定的。
退出移动版