在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为驼峰式命名的更多相关文章

  1. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  2. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  3. Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...

  4. props传递数据

    一.传递数据 1.props 传入单数据 就像 data 一样,prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用 <template> <d ...

  5. vue组件中camelCased (驼峰式) 命名与 kebab-case(短横线命名)

    HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: 如果你使用字符串模 ...

  6. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  7. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  8. vue——父组件向子组件传递数据

    看例子: //注册一个全局组件,组件标签名为child Vue.component('child', { props: ['msg'], //接收父组件传递的数据 template: '<h3& ...

  9. Vue子页面给父页面传递数据

    子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...

随机推荐

  1. SQL事务回滚 写法(转)

    以下是SQL 回滚的语句:方案一:SET   XACT_ABORT   ON--如果产生错误自动回滚GOBEGIN   TRANINSERT   INTO   A   VALUES   (4)INSE ...

  2. shell调用python脚本,并且向python脚本传递参数

    1.shell调用python脚本,并且向python脚本传递参数: shell中: python test.py $para1 $para2 python中: import sys def main ...

  3. 联想yoga table2 1371f 进入bios 的巧妙方法

    win8.1 的平板,无键盘,触屏失灵,接了个鼠标   我在这里向大家介绍最后一个方法<ignore_js_op>▲在metro界面下找到设置选项 <ignore_js_op> ...

  4. @JsonFormat与@DateTimeFormat注解的使用

    背景:从数据库获取时间传到前端进行展示的时候,我们有时候可能无法得到一个满意的时间格式的时间日期,在数据库中显示的是正确的时间格式,获取出来却变成了很丑的时间戳,@JsonFormat注解很好的解决了 ...

  5. 使用curl发送post或者get数据

    一. 使用curl可以仿造http的请求,向目标服务器或者是目标IP发送数据,进行操作. (1).使用php操作curl向某个接口上发送GET请求: 下面是写的一个比较简单的请求方式请求数据,传入的参 ...

  6. 自己动手写RNN

    说的再好,也不如实际行动,今天手写了一个RNN,没有使用Numpy库,自己写的矩阵运算方法,由于这也只是个学习用的demo,所以矩阵运算那一部分写的比较丑陋,见笑了. import com.mylea ...

  7. 160726 smarty 笔记(1)

    模板里面显示变量:1.变量要写在Smarty标记之间,变量名以$开头<{$test}>2.支持所有类的数据,包括数组(关联数组),对象关联数组在模板显示的时候,除了可以使用php语法之外, ...

  8. Mac下 Visual VM 无法检测到本地的Java进程

    我下载的是VisualVM1.4 下载完成之后,在左边栏Local哪里只有VisualVM自己的进程. 我本地启动的eclipse和intelliJ都没有检测到. 网上查阅后都是Window下的解决方 ...

  9. Linux-chmod_命令的详细用法讲解

    Linux chmod 命令 chmod用于改变文件或目录的访问权限.用户用它控制文件或目录的访问权限.该命令有两种用法.一种是包含 字母和操作符表达式的文字设定法:另一种是包含数字的数字设定法. 1 ...

  10. java多态 以及静态绑定 动态绑定积累

    重载,英文名是overload,是指在一个类中定义了一个以上具有相同名称的方法,这些方法的参数个数.参数类型和顺序不能相同.返回类型可以相同,也可以不同. 重写,英文名是overrid,是指在继承情况 ...