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 split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
js实现数字滚动特效
Dec 16 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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下载CSS文件中的图片的代码
2013/09/24 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js 走马灯简单实例
2013/11/21 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
js简易版购物车功能
2017/06/17 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
用JS实现选项卡
2020/03/23 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python映射列表实例分析
2015/01/26 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python文件及目录操作代码汇总
2020/07/08 Python
Django封装交互接口代码
2020/07/12 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
一套Java笔试题
2016/08/20 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
天地会口号
2014/06/17 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书