关于vue2的Ref的特点

先看官方解释。从上面我们可以知道$refs会返回dom或者组件实例或者包含前两者的数组，但是有个问题就是一个组件页面ref中有多个同名的，Vue会怎么处理呢？这里我想区分两种情况。普通的非v-for渲染的元素或组件不是v-for渲染的同名ref。结论是dom结构为主，先从上到下，再从内层到外层。name对应的最后一个ref，如果是原生dom，则返回dom元素本身，如果是组件，则返回组件实例。请参见下面的示例。模板结果终于发现拿到了组件的实例。如果删除上的ref，您将在其内层获得ref="one"的div，因为它是具有相同名称的底部ref。这里有一个需要注意的地方是slot必须有效才能获取到slot中的元素或组件，否则会获取到外层的组件。v-for渲染的普通元素或组件第二种情况是使用v-for渲染多个同名的ref元素。首先，我们必须把v-for看成一个整体，它也会遵循第一条规则，比如v-for的元素同层下有一个同名的ref标签或组件，$refs就会得到下面的dom或者component实例，如果返回，就会得到v-for的元素数组。然后我们看只有v-for的情况。上面说到，我们在v-for中使用ref获取元素时，不管里面是否有多个同名ref元素，都会返回数组。见下图。templateresult在v-for中没有同名ref的情况下，返回的是一个只有一条数据的数组，所以只要在v-for中获取到ref，就一定会得到一个数组，所以在处理数据的时候要注意.看下图，我们使用index动态渲染ref来保证ref的唯一性。templateresult接下来讨论v-forref得到的元素的顺序。再来看看多级同名refs的情况。简单来说，就是从里到外，从上到下。见下图。templateresult看看v-for包含组件时有没有区别，见下图。templateresult可以看到也是遵循上面的规则。