Vue组件的命名规则

什么是组件？
可以组合的物件就叫组件，比如手臂、腿就是人的组件。
组件可以认为是实例中的实例。

camelCased (驼峰式) 命名与kebabCase (短横线) 命名

1. 在html中不允许使用驼峰！
html中的组件必须用短横线命名，例如my-component。
在组件中, 父组件给子组件传递数据必须用短横线，例如my-msg。

2. 在template中必须使用驼峰。

<div id="app">
//html中只能用短横线或小写<my-component my-msg='lalala'></my-component>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',components: {'myComponent': {template: '<div>{{myMsg}}</div> ', //这里必须用驼峰props: ['myMsg'],}}})

3.在组件的data中用this.XXX引用时,只能是驼峰命名方式，比如this.myMsg。

<div id="app"><my-component my-msg='lalala'></my-component>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',components: {'myComponent': {template: '<div>{{abc}}</div> ', props: ['myMsg'],data() {return {abc: this.myMsg //只能是驼峰}}}}})

不规范命名的报错信息，如下图所示:

4.文件名最好全小写，因为有些古老的操作系统(window10)可能不能识别大小写，防止2个大小写文件重名。
5.组件首字母最好大写

import Demo from './demo.vue'

Vue组件的命名规则相关推荐

vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
pls-00302: 必须声明组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完从0到1教你搭建前端团队的组件系统之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
vue组件一直注册不了_Vue注册组件命名时不能用大写的原因浅析
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得. 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的 ...
vue组件命名指南,不为取名而纠结
前言自古中国取名文化博大进深,往往取一个好的名字而绞尽脑汁.那么一个好名字能够带来什么呢? 名字的内涵必需和使用者固有的本性相配套不和名人重名.不易重名.创意新颖,真正体现通过名字以区分人的作用 ...
[vue] 说说组件的命名规范
[vue] 说说组件的命名规范定义组件名有两种方式: 1.kebab-case(短横线分隔命名),引用时必须也采用kebab-case: 2.PascalCase(首字母大写命名),引用时既可以采用 ...
eslint怎么解决给Vue组件命名Template会报错？避免大驼峰写法？
只要我们在在[eslintrc.js中] rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

Vue组件的命名规则

Vue组件的命名规则

Vue组件的命名规则相关推荐

最新文章

热门文章