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调试工具(下载)
Jan 09 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
微信小程序实现首页弹出广告
Dec 03 Javascript
vue实现拖拽交换位置
Apr 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
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
简单的js表单验证函数
2013/10/28 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript版2048小游戏
2015/03/18 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
python 上下文管理器使用方法小结
2017/10/10 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
详解小白之KMP算法及python实现
2019/04/04 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
平面设计岗位职责
2013/12/14 职场文书
运动会通讯稿150字
2014/02/15 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
技术负责人岗位职责
2015/02/10 职场文书
幼儿园辞职信
2015/05/13 职场文书
第一书记观后感
2015/06/08 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫