Vue $refs 和 kebab 案例

【问题标题】：Vue $refs and kebab caseVue $refs 和 kebab 案例
【发布时间】：2016-12-20 16:48:39
【问题描述】：

在 vue 1 中可以这样做：

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

然后像这样引用它：

vm.$refs.testApp;

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

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

但是这不再可以被

引用

vm.$refs.testApp

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

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

在标准 DOM 中是不允许的。它是一个错误吗？ kebab case不能再用了吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

并像这样从 Vue 中引用它：

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

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

【讨论】：