最近应用el-tabs组件遇到了一个问题：就是el-tabs中el-tab-pane是动静生成的，而且后续须要获取el-tab-pane中元素的ref，代码大略是上面的样子：
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in case_tabs" :label="item.name" :name="index.toString()" :key="index"> <TabList :ref="`tab${index}`"/> </el-tab-pane></el-tabs>这个应用场景是当切换tab时，要调用组件<TabList />外部的的load办法。
handleClick(tab) { this.activeName = tab.index this.$refs[`tab${tab.index}`].load()}看似没有故障，然而点击切换时就报错了，提醒this.$refs[tab${tab.index}]是undefined。
这时就须要去搞明确这个ref到底是什么样的工作机制，vue官网查到以下内容：
ref 被用来给元素或子组件注册援用信息。援用信息将会注册在父组件的 $refs 对象上。如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例
当 v-for 用于元素或组件的时候，援用信息将是蕴含 DOM 节点或组件实例的数组。
对于 ref 注册工夫的重要阐明：因为 ref 自身是作为渲染后果被创立的，在初始渲染的时候你不能拜访它们 - 它们还不存在！$refs 也不是响应式的，因而你不应该试图用它在模板中做数据绑定。
可见，咱们在应用v-for时应该把子组件的ref寄存在一个数组中。
解决方案
<template> <el-tabs v-model="activeName" type="card" @tab-click="handleClick" > <el-tab-pane v-for="(item, index) in case_tabs" :label="item.name" :name="index.toString()" :key="index"> <TabList :ref="setItemRef"/> </el-tab-pane> </el-tabs><template><script>export default { name: "CaseList", ..., data(){ return { refList: [] } } methods: { setItemRef(el) { this.refList.push(el) }, handleClick(tab) { this.activeName = tab.index this.refList[tab.index].load() }, }}</script>这样程序就能够失常工作了。
文章首发于我的集体博客 《IICOOM-vue 设置动静 ref》