VueJS 组件参数名命名与组件属性转化问题


Posted in Javascript onDecember 03, 2018

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 组件参数名命名与组件属性转化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue.Draggable拖拽功能的配置使用方法
Jul 29 #Javascript
小程序实现授权登陆的解决方案
Dec 02 #Javascript
mpvue 单文件页面配置详解
Dec 02 #Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 #Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
You might like
摩卡咖啡
2021/03/03 咖啡文化
PHP多个版本的分析解释
2011/07/21 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php通过各种函数判断0和空
2020/07/04 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python sqlite的Row对象操作示例
2019/09/11 Python
django实现模型字段动态choice的操作
2020/04/01 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
文秘专业自荐信
2013/10/14 职场文书
优质的学校老师推荐信
2013/10/28 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
公司介绍信范文
2015/01/31 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
七个非常实用的Python工具包总结
2021/06/15 Python