不能使用$ refs使用变量名代替直接值

Question

我试图使用$ refs从父组件中调用子组件的方法。如果我按常规方式操作，它会起作用：this.$refs.actualNameOfTheChildComponent.someMethod()

但是出于我的应用程序的需要，我必须使用变量名称而不是子组件的实际名称：

const previousAction = `action${i-1}`
this.$refs.previousAction.showConflict()

在第二行中，Vue无法理解我不是在指代名为previousAction的子组件，而是在其子组件中是名称为变量{{1 }}。

正确的方法是什么？

Answer 1

写.something只是["something"]的语法糖。因此，您可以使用：

const previousAction = `action${i-1}`
this.$refs[previousAction].showConflict()

您可以详细了解点符号和括号符号 here之间的区别。

  

点和括号之间有一些重要区别   表示法：

     

点符号：

     

  
• 属性标识只能是字母数字   （以及_和$）
  
• 属性标识符不能以数字开头。
  
• 属性标识符不能包含变量。
  
• 确定-obj.prop_1，   obj.prop $
  
• 不正确-obj.1prop，obj.prop名称
  

     

括号符号：

     

  
• 属性标识符必须是字符串或引用字符串的变量。
  
• 可以使用开头的变量，空格和字符串   用数字
  
• 好的-obj [“ 1prop”]，obj [“ prop name”]