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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
微信小程序异步处理详解
Nov 10 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 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
Laravel 5 框架入门(三)
2015/04/09 PHP
php实现递归的三种基本方式
2020/07/04 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
JS实现放大镜效果
2020/09/21 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python 异或加密字符串的实例
2018/10/14 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
c/c++某大公司的两道笔试题
2014/02/02 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
终止劳动合同协议书
2014/10/05 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS