不能使用 $refs 使用变量名而不是直接值

Question

我正在尝试使用 $refs 从父组件调用子组件的方法。如果我以常规方式进行操作，它会起作用：this.$refs.actualNameOfTheChildComponent.someMethod()

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

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

在第二行中，Vue 不明白我指的不是一个名为 previousAction 的子组件，而是指一个名称为变量值的子组件 previousAction.

正确的做法是什么？

Answer 1

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

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

您可以阅读更多关于圆点表示法和括号表示法之间的区别的信息here。

There are some important differences between dot and bracket notation:

Dot notation:

• Property identifies can only be alphanumeric (and _ and $)
• Property identifiers cannot start with a number.
• Property identifiers cannot contain variables.
• OK — obj.prop_1, obj.prop$
• Not OK — obj.1prop, obj.prop name

Bracket notation:

• Property identifiers have to be a String or a variable that references a String.
• It is okay to use variables, spaces, and Strings that start with numbers
• OK — obj["1prop"], obj["prop name"]