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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
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
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python用户管理系统
2018/03/13 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
J2EE面试题大全
2016/08/06 面试题
八项规定整改方案
2014/02/21 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
人力资源求职信
2014/05/25 职场文书
聘用意向书
2014/07/29 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
大四学生个人总结
2015/02/15 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript