[Vue]Vue实例的选项props传递数据props为驼峰式命名
在vue的中文官网有这样的说明:
HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
如果你使用字符串模板,那么这个限制就不存在了。
1.当组件中template及props等使用驼峰式命名,在html中对应的改成短横线命名方式。
2.当组件中template及props等使用字符串模板,在html中改成对应的小写。
源码说明:
在Vue的源码中创建Vue组件的时候createComponent(),解析组件的相关属性,而在extractPropsFromVNodeData()中,Vue通过调用内部方法hyphenate,把驼峰形式的属性转换为横断线形式。
除此之外,Vue在initProps(),validateProp()时,都将驼峰形式的属性转换为横断线形式。
[Vue]Vue实例的选项props传递数据props为驼峰式命名的更多相关文章
- vue组件详解(二)——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅 ...
- vue组件详解——使用props传递数据
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
- props传递数据
一.传递数据 1.props 传入单数据 就像 data 一样,prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用 <template> <d ...
- vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)
HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模 ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- vue——父组件向子组件传递数据
看例子: //注册一个全局组件,组件标签名为child Vue.component('child', { props: ['msg'], //接收父组件传递的数据 template: '<h3& ...
- Vue子页面给父页面传递数据
子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...
随机推荐
- 003-shell 传递参数
一.概述 可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 二.实例 以下实例我们向 ...
- Java Code Template
设置注释模板的入口:Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元素 ...
- css 自定义滚动条
我遇到的场景: 对于iframe窗口,自带滚动条是整个窗口的大小.有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部. 那么首先打开iframe时应该去掉滚动条 scrolling="n ...
- sql 自定义函数返回中文,数字,英文
--提取数字IF OBJECT_ID('DBO.GET_NUMBER2') IS NOT NULLDROP FUNCTION DBO.GET_NUMBER2GOCREATE FUNCTION DBO. ...
- Godaddy域名因为whois信息虚假被暂时关闭
如果你收到来自 Godadddy 通过 invalidwhois@godaddy.com 发出的标题为如下内容的邮件: [Incident ID: xxxx] xxxx - DS Invalid Wh ...
- Spark集群 Python Package管理
具体问题: 不同的数据分析人员/开发团队需要不同版本的Python版本执行PySpark. 同一Python版本下,需要安装多个Python库,甚至需要不同版本的库. 针对问题2的一个解决办法是将Py ...
- getAttribute() 与 attr() 的区别
getAttribute() 和 attr() 都是获取元素属性的方法,只是一种是 JS 写法,一种是 JQ 写法,但其实它们是有区别的. 主要区别 调用 getAttribute() 的主体必须是元 ...
- PHP中的错误信息
PHP中的错误信息 php.ini中配置错误消息 在PHP4中,没有异常 Exception这个概念,只有 错误Error.我们可以通过修改php.ini 文件来配置用户端输出的错误信息. 在ph ...
- 用C#连接SFTP服务器并进行上传下载文件
1.使用软件连接可采用WinSCP进行: 文件协议选择SFTP,端口号默认22 2.使用C#代码操作 参考:http://www.cnblogs.com/binw/p/4065642.html 主要引 ...
- 2019 google kickstart round A
第一题: n个人,每个人有一个对应的技能值s,现在要从n个人中选出p个人,使得他们的技能值相同. 显然,如果存在p个人的技能值是相同的,输出0就可以了.如果不存在,就要找出p个人,对他们进行训练,治他 ...