[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">传递 ...
随机推荐
- springboot跨域处理
/** * @author 657642432@qq.com * 跨域处理 */ @Configuration public class CorsConfig { @Bean public Filte ...
- SyntaxError: Missing parentheses in call to 'print'. Did you mean print('XXXXXX')?
因为Python3中取消了以前Python 2中的语法. 所以Python 3再使用python2的语法格式就会报错 错误信息中提示需要加上括号,字符串可以用单引号或双引号括起来 这样就不会报错了.
- Centos Docker1.12 远程Rest api访问的配置方法
Docker默认是没有开启HTTP远程访问的,默认只支持通过unix socket通信操作docker daemon,需要使用HTTP restful接口需要修改配置. 1.修改配置文件,文件位置/l ...
- 安装pip环境以及pip常用命令使用
1.去到Python的官网下载pip包,下载地址是:https://pypi.python.org/pypi/pip#downloads 2.下载完成之后,解压到一个文件夹,用CMD控制台进入解压目录 ...
- C++实现去掉string字符串前后的空白字符
C++标准库提供的字符串类string没有提供类似CString中Trim方法,该方法功能为去除字符串前后的空白字符.利用string自身一些方法可以很容易实现该功能. 如下: void Trim(s ...
- boost单元测试框架
头文件: #include <boost/test/unit_test.hpp> 编译加:-lboost_unit_test_framework 单元测试: 需要定义BOOST_TEST_ ...
- python全栈开发从入门到放弃之socket并发编程多线程GIL
一 介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...
- 31. Next Permutation (下一个全排列)
Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...
- 理解js的DOM操作
1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动.document.documentElement 返回文档的根节点<html> document.body ...
- Win10应用《纸书科学计算器》更新啦!
<纸书科学计算器>在2016年8月拿了计算机设计大赛国家一等奖,现在仍记得我在答辩时还给评委们普及了一波UWP平台的知识.受此鼓励,这款应用也不会停下更新的脚步^_^.最近从1.9小幅升级 ...