vue设置动态ref

最近在使用el-tabs组件的时候遇到一个问题：el-tabs中的el-tab-pane是动态生成的，需要el-tab-pane中元素的ref后来得到，代码大概是这样的：这个使用场景是在切换tab时调用组件内部的load方法。handleClick(tab){this.activeName=tab.indexthis.$refs[`tab${tab.index}`].load()}貌似没问题，但是点击切换的时候报错，提示this.$refs[tab${tab.index}]未定义。这时候就需要了解这个ref是一个什么样的工作机制。在vue官网上找到如下内容：ref用于注册元素或子组件的引用信息。引用信息会被注册到父组件的$refs对象上。如果用在普通DOM元素上，则引用指向DOM元素；如果在子组件上使用，则引用指向组件实例。当v-for用于元素或组件时，引用信息将包含的DOM节点或组件实例数组。关于ref注册时间的重要说明：因为refs本身是作为渲染的结果创建的，所以您无法在初始渲染期间访问它们-它们还不存在！$refs也不是反应式的，因此您不应该尝试将它用于模板中的数据绑定。可以看出，我们在使用v-for时，应该将子组件的ref存放在一个数组中。解决方案="item.name":name="index.toString()":key="index">