VueJS 组件参数名命名与组件属性转化问题
2019-01-09 00:03
741 查看
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>
总结
以上所述是小编给大家介绍的VueJS 组件参数名命名与组件属性转化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue组件参数名命名与组件属性转化示例
- ssh参数传不到action中,实体bean中属性名的命名问题
- vue路由只变化参数页面组件不更新问题
- 一个Spring中的属性命名的小问题
- java学习脚印:SAX解析xml时命名空间以及参数问题(敏捷版)
- GridView中HyperLink的NavigateUrl属性的链接地址带参数出错的问题
- 解决地址栏传递中文属性参数的乱码问题------tomcat服务器
- ExtJs的一些组件中常用的参数、属性整理
- Struts2 Action属性接收参数中文问题
- vue组件命名问题
- python __name__属性带来命名空间问题
- (待补全测试结果)crm小问题注意:add.jsp添加客户页面回显字典供选择。【查询字典时传参数typeCode不能和属性名相同】
- 使用jspsmartupload解决表单属性为multipart/form-data不能传其他参数的问题
- 错误 ——序列化对象属性命名与 json 转换问题
- springMVC Controller 参数bean中Date类型属性的赋值问题
- 构造函数的参数命名问题和几种初始化方式
- 用Commons组件里upload时候参数的问题
- 属性参数 - 位置参数和命名参数
- Java Bean 属性命名规范问题分析
- vuejs父子组件通信的问题