Vue $refs 和 kebab 案例 [英] Vue $refs and kebab case

问题描述

在 vue 1 中可以这样做:

In vue 1 it was possible to do this:

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

然后像这样引用它:

vm.$refs.testApp;

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

however in vue 2 the syntax for the ref has changed to:

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

但这不能再被

vm.$refs.testApp

相反，它仅适用于:

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

这在标准 DOM 内容中是不允许的.这是一个错误吗?烤肉串盒可以不再使用了吗?

which in standard DOM stuff isn't allowed. Is it a bug? can kebab case no longer be used?

推荐答案

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

Since the syntax has been changed from that of a namespaced element attribute (i.e., v-ref:foo-bar) to a normal key-value-pair attribute (i.e., ref="fooBar"), the implicit kebab-case-to-camel-case conversion is no longer applicable because the reference name is a plain string and is not constrained by having to conform to the requisite lowercase-kebab-case HTML syntax.

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

In other words, you can identify a ref with any string, so it wouldn't make sense for Vue to manipulate it. Have a look at this CodePen for an example in action of what I mean.

但是，基本上，一个普通的字符串引用值意味着你可以像这样定义一个引用:

But, basically, a plain string ref value means you can define a reference like this:

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

并像这样从Vue引用它:

and reference it from Vue like this:

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

简而言之，不，这不是错误，但不，自动烤肉串大小写转换不再发生.

In short, no, it's not a bug but no, automatic kebab-case conversion no longer takes place.

这篇关于Vue $refs 和 kebab 案例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！