Vue $refs 和 kebab 案例

Question

在 vue 1 中可以这样做：

<app v-ref:test-app></app>

然后像这样引用它：

vm.$refs.testApp;

但是在 vue 2 中，ref 的语法已更改为：

<app ref="test-app"></app>

但是

无法再引用它

vm.$refs.testApp

相反，它仅在以下情况下有效：

<app ref="testApp"></app>

这在标准 DOM 中是不允许的。这是一个错误吗？ kebab 盒可以不再使用吗？

Answer 1

由于语法已从命名空间元素属性（即 v-ref:foo-bar）更改为普通键值对属性（即 ref="fooBar"），隐式 kebab- case-to-camel-case 转换不再适用，因为引用名称是一个纯字符串，并且不受必须符合必需的小写-kebab-case HTML 语法的限制。

换句话说，你可以用任何字符串来标识一个ref，所以Vue去操作它是没有意义的。看看这个 CodePen 的例子，了解我的意思。

但是，基本上，一个纯字符串引用值意味着您可以像这样定义一个引用：

<div id="app" ref="test ** app!"></div>

并像这样从 Vue 中引用它：

this.$refs['test ** app!']

简而言之，不，这不是一个错误，但不，自动 kebab-case 转换不再发生。

Vue $refs and kebab case