vue.js - 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 转换不再适用，因为引用名称是一个纯字符串，并且不受必须符合必要的 lowercase-kebab-case 的限制HTML 语法。

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

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

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

并像这样从 Vue 中引用它:

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

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