本文主要介绍了 vuejs 组件参数名命名与组件属性转化问题, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
html 特性是不区分大小写的. 所以, 当使用的不是字符串模版, camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:
- vue.component('child', {
- // camelCase in JavaScript
- props: ['myMessage'],
- template: '<span>{{ myMessage }}</span>'
- })
如果你使用字符串模版, 则没有这些限制.
- <!-- kebab-case in HTML -->
- <child my-message="hello!">
- </child>
- // 这个横线是在你驼峰式命名的参数大写字母前加上. // 注意上面两个代码片段中的 myMessage 与 my-message,vue.js
- 会自动转化.
如果你注意看浏览器的控制台输出, 里面也有信息提示.
如果你定义的 prop 参数不是驼峰式的, 那就不用加横线, 写的什么就用什么名.
PS: 下面看下 vue 组件参数传递命名
背景
今天在父子组件传值的时候, 父组件的值死活传不到子组件中, 断点调试也没有值, 后来打开控制台发现警告信息, HTML 语句中不识别大写字母, 再一看, 参数是驼峰命名, 难不成是这个问题, 遂百度之, 确实如此, HTML 中不支持大下写, 所以父组件传值的时候, 参数名应该用短横线连接.
注意
错误示例:
<my-component :userName='userName'></my-component>
正确示例:
<my-component :userName='userName'></my-component>
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/4f82215403ff4f9e23aeba0ca93feff5.html