Vue中使用变量名替代直接值调用$refs子组件方法的问题

数据老陈

2026-5-14

解决Vue中通过变量名访问$refs子组件的问题

这问题我之前也踩过坑！核心原因是点语法访问对象属性时，会把后面的标识符直接当作固定字符串键名，而不是解析你定义的变量值。所以你写this.$refs.previousAction的时候，Vue会傻愣愣地去找名为"previousAction"的子组件，完全没意识到你想用的是变量里存的那个动态键名。

正确的做法是用对象的方括号访问语法，它专门用来支持动态变量作为属性名的场景。把你的代码改成这样就行：

const previousAction = `action${i-1}`;
// 用方括号替代点语法，解析变量值作为refs的键名
this.$refs[previousAction].showConflict();

额外提醒几点：

一定要确保previousAction对应的子组件确实存在于$refs里，不然会触发Cannot read property 'showConflict' of undefined的错误。稳妥点可以加个判断：
```
const targetComponent = this.$refs[previousAction];
if (targetComponent) {
  targetComponent.showConflict();
}
```
如果你的子组件是通过v-for渲染出来的，那$refs里对应的会是一个组件数组，而不是单个实例。这时候要根据索引去取对应的组件，比如this.$refs[previousAction][0].showConflict()（如果只渲染了一个就取索引0）。