this.$refs['xxx'][0],是什么意思，为啥加0呢？

Question

父组件

<template>
<view class="user-order">
    <tabs :active="active" @change="changeShow" :config="{itemWidth: 125}">
        <tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
            <order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list>
        </tab>
    </tabs>
</view>
</template>

父组件有个方法这么写的。

this.$refs['order' + order[active].type][0].reflesh()

子组件下面是
<template>

<view>
    <view class="order-list">一堆，不写了</view>
    

</view>
</template>

            reflesh() {
                this.page = 1
                this.orderList = []
                this.status = loadingType.LOADING
                this.type = 0
                this.getOrderListFun();
            }

this.$refs['order' + order[active].type][0].reflesh() ，这个应该是调用了子组件的方法，刷新数据的意思。那为什么this.$refs'xxx',为什么跟一个数组下标0，有没有相关的refs教程，我百度了一下，没找到好理解的教程。

Answer 1

当使用v-for的时候：

<ul>
  <li v-for="item in 10" ref="test" :key="item"></li>
</ul>

this.$refs.test是个数组；this.$refs.test[0]就是第一个li

Answer 2

当你使用的ref是v-for出来的时候

Answer 3

0表示数组第0个元素，说明取得的结果是以数组展示的，数组里面是个对象，这种东西要领文这个数据的格式去解析下数据格式就知道了。

已参与了 SegmengtFault 思否 「问答」打卡，欢迎正在阅读的你也加入。

Answer 4

直接看代码比你去找教程更快，给你截取vue源码关于ref的处理

function registerRef (vnode, isRemoval) {
    var key = vnode.data.ref;
    if (!isDef(key)) { return }

    var vm = vnode.context;
    var ref = vnode.componentInstance || vnode.elm;
    var refs = vm.$refs;
    if (isRemoval) {
      if (Array.isArray(refs[key])) {
        remove(refs[key], ref);
      } else if (refs[key] === ref) {
        refs[key] = undefined;
      }
    } else {
      if (vnode.data.refInFor) {
        if (!Array.isArray(refs[key])) {
          refs[key] = [ref];
        } else if (refs[key].indexOf(ref) < 0) {
          // $flow-disable-line
          refs[key].push(ref);
        }
      } else {
        refs[key] = ref;
      }
    }
  }

可以看到当ref是在for循环中时，ref所绑定的key对应的value是以数组形式存储的

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入