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函数
Aug 01 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
微信小程序实现单选功能
Oct 30 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
javascript深入理解js闭包
2010/07/03 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
python字符串,数值计算
2016/10/05 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
报关报检委托书
2014/04/08 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
小学体育组工作总结
2015/08/13 职场文书
初中政治教学工作总结
2015/08/13 职场文书
python内置进制转换函数的操作
2021/06/02 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Python 图片添加美颜效果
2022/04/28 Python
java版 联机五子棋游戏
2022/05/04 Java/Android