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 组件参数名命名与组件属性转化问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 深入解析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

  • 在Vue中获取组件声明时的name属性方法

    在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err

  • 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组件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组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • 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进行组件之间的传值的示例

    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

随机推荐