在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. Mac 升级 OpenSSL

    [转载自 https://blog.csdn.net/focusjava/article/details/51179297 ] [升级Mac的openssl] 终端下 openssl version ...

  2. linux下编写简单的守护进程

    搭建linux服务器的时候,需要写一个简单的守护进程来监控服务的运行情况,shell脚本如下: #!/bin/sh function daemon() { while true do server=` ...

  3. LVS-DR 配置测试

    LVS Lvs体系结构 Lvs工作模式(3种) NAT-网络地址转换模式 当用户请求到达调度器时,调度器将请求报文的目标地址(即虚拟IP地址)改写成选定的Real Server地址,同时报文的目标端口 ...

  4. javascript面向对象笔记(一)

    ECMAscript对象(以下简称对象): ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数. 对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.值可以是数据 ...

  5. spark 作业提交

    kafka-topics.sh --describe --zookeeper xxxxx:2181 --topic testkafka-run-class.sh kafka.tools.GetOffs ...

  6. Jmeter中解决中文乱码问题

    在使用JMeter过程中,执行结果响应断言总是提示失败,但是使用英文字母可以成功,表示逻辑和其它地方没有问题,问题可能出在编码上,细看了响应数据和日志,其中中文参数被编码成了类似URL编码格式,如下图 ...

  7. Spring AOP统一异常处理

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  8. Web前端学习笔记之jQuery选择器

    JQuery过滤器 经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试.首先HTML代码 HTML Code <html><head ...

  9. Python面试题之Python迭代器

    要理解迭代器,首先要从字面意思来说. 迭代 重复 下一次重复基于上一次的结果 软件开发就是典型的迭代更新. 讲迭代,我们就先来模拟一下迭代: 现在让我们使用while循环来遍历出一个列表list1 = ...

  10. Python3.x:获取代理ip以及使用

    Python3.x:获取代理ip以及使用 python爬虫浏览器伪装 #导入urllib.request模块 import urllib.request #设置请求头 headers=("U ...