VueJS 组件参数名命名与组件属性转化问题
HTML 特性是不区分大小写的。所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
如果你使用字符串模版,则没有这些限制。
<!-- kebab-case in HTML --> <child my-message="hello!"></child>这个横线是在你驼峰式命名的参数大写字母前加上。 注意上面两个代码片段中的myMessage与my-message,vue.js会自动转化。
如果你注意看浏览器的控制台输出,里面也有信息提示。
如果你定义的prop参数不是驼峰式的,那就不用加横线,写的什么就用什么名。
PS:下面看下vue组件参数传递命名
背景
今天在父子组件传值的时候,父组件的值死活传不到子组件中,断点调试也没有值,后来打开控制台发现警告信息,html语句中不识别大写字母,再一看,参数是驼峰命名,难不成是这个问题,遂百度之,确实如此,html中不支持大下写,所以父组件传值的时候,参数名应该用短横线连接。
注意
错误示例:
<my-component :userName='userName'></my-component>
正确示例:
<my-component :userName='userName'></my-component>
总结
以上所述是小编给大家介绍的VueJS 组件参数名命名与组件属性转化问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
在Vue中获取组件声明时的name属性方法
在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err
-
vue组件watch属性实例讲解
本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i
-
在Vue组件上动态添加和删除属性方法
如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法
-
vue组件中的样式属性scoped实例详解
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di
-
Vue组件中prop属性使用说明实例代码详解
Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h
-
深入解析Vue 组件命名那些事
There are only two things in Computer Sciences: cache invalidation and naming things. -- Phil Karlton 诚如上述所言,编程中变量命名确实令人很头疼.我们模糊地知道,Vue 组件的名称最好不要和原生 HTML 标签相同.为了避免重名,通常会在组件名称前面加上一个前缀,如 el-button.el-input.el-date-picker.这通常不会有什么问题,但有时候你的模板中混杂了原生 HTML
-
VueJS 组件参数名命名与组件属性转化问题
HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名: Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }) 如果你使用字符串模版,则没有这些限制. <!-- kebab-
-
详解vue中组件参数
我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求,例如你知道的这些类型.如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你.这在开发一个会被别人用到的组件时尤其有帮助. 我们来看下最为简单和常见的vue代码 <div id="root"> <item content="hello"></item> </div> <script> Vue.compo
-
Vuejs 实现简易 todoList 功能 与 组件实例代码
todoList 结合之前 Vuejs 基础与语法 •使用 v-model 双向绑定 input 输入内容与数据 data •使用 @click 和 methods 关联事件 •使用 v-for 进行数据循环展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <s
-
Vue 组件参数校验与非props特性的方法
子组件接收父组件的参数的时候,props注册接收的参数 props:['count'] 子组件可以对接收的参数校验. 例如规定接收的count参数要求是String props:{ count:String } 如果count是别的类型就会报错 组件的参数校验 组件的参数校验指的是什么呢?你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验. <div id="root"> <child content="hell
-
vuejs实现递归树型菜单组件
前言 前段时间使用vue做了一套后台管理系统,其中使用最多就是递归组件,也因为自己对官方文档的不熟悉使得自己踩了不少坑,今天写出来和大家一起分享. 递归组件 组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以. 在官网这句话就是关键定义组件是一定要有name属性. 模拟数据格式如下: [ { "id": "1", "menuName": "基础管理", "menuCode": "
-
vuejs使用$emit和$on进行组件之间的传值的示例
$emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了. 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发. 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现. 1.现在有两个组件,父组件contact_index.vue,子组件cust_tree.vue 2.点击父组件里面的选择
-
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
作为vue的初用者,你可能会像我一样遇到一个问题,对跳转组件是,我们想通过参数不同,调用不同的方法. 例如: app.vue <ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:index.link,query:{type:index.name}}" > {{in
-
Angular组件拿不到@Input输入属性问题探究解决方法
目录 区别一 区别二 区别三 总结 我需要给一个Component设置一个输入属性 @Input,好了,直接上代码,没有什么难度. 原代码是这样的: @Component({ selector: 'my-menu', templateUrl: './main-menu.widget.html' }) export class MyMenuWidget { data: any[]; ... constructor(...) { this._changesSubscription = this._s
-
详解vue.js2.0父组件点击触发子组件方法
之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment
随机推荐
- asp(vbs)Rs.Open和Conn.Execute的详解和区别及&H0001的说明
- JavaScript操作HTML DOM节点的基础教程
- vue动态路由实现多级嵌套面包屑的思路与方法
- iOS判断运营商类型的实现方法
- asp.net BackgroundWorker之在后台下载文件
- ajax提交session超时跳转页面使用全局的方法来处理
- C#二进制序列化实例分析
- 修改mysql默认字符集的两种方法详细解析
- linux下安装php的memcached客户端
- linux命令行批量创建目录详解
- $.ajax()方法参数详解
- 基于JavaScript实现数码时钟效果
- jstl之map,list访问遍历以及el表达式map取值的实现
- JS实现iframe自适应高度的方法示例
- javascript 获取元素样式必杀技
- 基于spring+quartz的分布式定时任务框架实现
- 电源插座惹的祸
- java集合迭代器Iterator中的remove陷阱
- c#静态方法和非静态方法详细介绍
- php实用代码片段整理