浅谈Vue初学之props的驼峰命名

这篇文章主要为大家详细介绍了浅谈Vue初学之props的驼峰命名，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在vue的中文官网有这样的说明：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

以以下代码为例：

1、当组件中template及props等使用驼峰式命名，在html中对应的改成短横线命名方式。

【图片暂缺】

2、当组件中template及props等使用字符串模板，在html中改成对应的小写。

【图片暂缺】

源码说明：

在Vue的源码中创建Vue组件的时候createComponent()，解析组件的相关属性

代码如下：

// extract props
var propsData = extractPropsFromVNodeData(data, Ctor, tag);

而，在extractPropsFromVNodeData()中，Vue通过调用内部方法hyphenate，把驼峰形式的属性转换为横断线形式。

【图片暂缺】

除此之外，Vue在initProps()，validateProp()时，都将驼峰形式的属性转换为横断线形式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5204-0.html

注：关于浅谈Vue初学之props的驼峰命名的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js