在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. python web框架 django工程的创建

    安装 django pip3 install django pip install django 安装完后出现这两个文件 django-admin 用来创建文件夹 在script目录 执行这个命令 d ...

  2. C# 获取计算机cpu 硬盘 网卡信息

    /// <summary>/// 机器码         /// </summary>       public class MachineCode         {     ...

  3. Linux系统——磁盘管理

    磁盘结构 (1)硬盘的物理结构 磁头:每面一个磁盘 盘片:硬盘有多个盘片,每个盘片2面 (2)硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节的数据 磁道:统一盘片不同半径的同心 ...

  4. 002-jdk10安装

    下载地址: 1.百度云下载地址.(当然也可以官网下载,都一样) 地址:https://pan.baidu.com/s/13oZh_5tXb_Xadg9f-y2Idw 密码:a9h8 安装jdk: 2. ...

  5. CCF 字符串匹配(find()函数的使用)

    问题描述 试题编号: 201409-3 试题名称: 字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你 ...

  6. How can For each...

    Answer:   I understand the IEnumerator/IEnumerable methods and properties and also how they are inte ...

  7. java.sql.SQLException: Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation '=' 异常处理,及MySQL数据库编码设置

    java.sql.SQLException: Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,C ...

  8. [2012-12-18 14:59:31]AS3 常用正则表达式的总结-不用google了,我帮收集的很多了

    正则表达式是一种通用的标准,大部分计算机语言都支持正则表达式,包括as3,这里转摘出了一些常用的正则表达式语句,大家用到的时候就不用自己写了.红色字体为常用正则:下面这个类是我自己写的一个示例,想必大 ...

  9. c++ 中 BOOL与bool TRUE与true FALSE与false 区别

    转自:http://blog.chinaunix.net/uid-28458801-id-3941112.html   FALSE/TRUE与false/true的区别 1.FALSE/TRUE与fa ...

  10. mysql服务解压版的安装(5.7)

    推荐博客: https://www.cnblogs.com/LxyXY/p/7708016.html