vue组件命名大小写问题

  1. HTML对标签的大小写不敏感，对属性和属性值的大小写敏感
  2. JavaScript对大小写敏感

在JavaScript中注册vue组件时，我们要给组件一个名字。JavaScript中大小写是敏感的，因此在注册组件的名字中会保留大小写。但是HTML中标签的大小写是不敏感的，这就导致组件无法正常使用。

例子：

在html文本中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
    <div id="app">
        {{message}}
        <button @click="count++">{{count}}</button>
        <mySom></mySom>
    </div>
</body>

<script type="module">
    import { createApp } from 'vue';

    //局部组件
    var myComp = {
        template: '<h1>hello?</h1>'
    };
    
    //createApp用于创建vue应用
    const app = createApp({
        //data选项是一个函数，他返回一个对象
        data(){
            return {
                count:0,
                message:'hello csu'
            }
        },
        
        //局部组件
        components: {
            //这里组件的名字中包含了大写字母S
            'mySom': myComp,
        }
    });
</script>

在浏览器解析后：

1
2
3
4
5
6
7
<div id="app" data-v-app="">
    hello csu 
    <button>0</button>
    <mysom></mysom>
</div>

<!-- mySom被解析成了mysom，导致组件无法正常使用 -->