Vue组件的命名规则

Vue组件的命名规则

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

camelCased (驼峰式) 命名与kebab­Case (短横线) 命名

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/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'myComponent': {
        template: '
{{myMsg}}
 ', //这里必须用驼峰
        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/[email protected]/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      'myComponent': {
        template: '
{{abc}}
 ', 
        props: ['myMsg'],
        data() {
          return {
            abc: this.myMsg //只能是驼峰
          }
        }
      }
    }
  })

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



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

import Demo from './demo.vue'