在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. mdf, ldf文件导入到sql server 2005的方法

    mdf, ldf文件导入到sql server 2005的方法 在实际的工作中, 有很多涉及到数据库资料的备份,转移, 恢复等方面的工作, 但是并不是所有的资料都是以.bak格式存在的, 比如说, 你 ...

  2. 读取xml文件,写入excel

    在上一篇 Python写xml文件已经将所有订单写入xml文件,这一篇我们把xml文件中的内容读出来,写入excel文件. 输入xml格式: <?xml version="1.0&qu ...

  3. genymotion——VT-x is not available (VERR_VMX_NO_VMX) 的解决方案

    进入虚拟机设置页面

  4. TensorFlow学习笔记(三)MNIST数字识别问题

    一.MNSIT数据处理 MNSIT是一个非常有名的手写体数字识别数据集.包含60000张训练图片,10000张测试图片.每张图片是28X28的数字. TonserFlow提供了一个类来处理 MNSIT ...

  5. Linux系统——最小化安装

    一.虚拟机进行Linux minimal 安装 网络连接:选择“自定义”——>VMnet8(NAT模式) #PC与NAT网络的虚拟机在不同网段,此时虚拟网卡作为网关建立通信 NAT模式可直接上I ...

  6. PHPCMS 修改后台路径简便方法

    之前在网上找了很多关于修改phpcms后台路径的修改方法,但是都太繁琐(个人感觉),终于找到了一个相对简单的修改方法,在这里和大家分享一下,希望互相学习. 第一步:在网站根目录创建一个文件夹,以后就要 ...

  7. 82. Remove Duplicates from Sorted List II(删除有序链表中的重复元素)

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  8. hdu4057 Rescue the Rabbit

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=4057 题目: Rescue the Rabbit Time Limit: 20000/10000 MS ( ...

  9. iOS & Android APP crash保护机制

    一.背景 还在码代码,码好再BB... 二.思路 三.解决方案 四.注意点 五.开源项目 github:https://github.com/qiyer/QYCrashProtector

  10. PreparedStatement和Statement区别详解

    技术原理 该 PreparedStatement接口继承Statement,并与之在两方面有所不同: PreparedStatement 实例包含已编译的 SQL 语句.这就是使语句“准备好”.包含于 ...