Vue 中通过 refs 调用 v-for 渲染的组件方法

在 Vue 项目中，有时候组件是通过 v-for 指令循环渲染出来的。举个例子：

<tabs>
    <tab-pane
        v-for="(tab, index) in TAB_DATA"
        :key="tab.key"
    >
        <pie-chart ref="piechart"/>
    </tab-pane>
</tabs>

在上述代码中，TAB_DATA 是一个数组，长度为 2。如果我们想通过 ref 来获取 pie-chart 的实例，并调用它的图表更新方法 updateChart。通常会这样写：

this.$refs.piechart.updateChart()

单个组件使用是可行的，但是在 v-for 渲染的组件是无法通过这个写法直接调用到对应的组件的方法。 实际上，在 v-for 指令中，ref 已经变成了一个数组，需要通过下标来定位到正确的 ref。

this.$refs.piechart[index].updateChart()

参考：Child and $refs not a function