vue 组件命名的小细节问题(大小写问题)

今天学习组件的时候,突然发现,定义的名为”Mycom"的组件在使用的时候用“mycom”使用没有任何问题,于是我就试了一下哪种情况可以,哪种情况不可以。
首先说明一下,我注册的是全局组件。

1.简单测试结果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 组件自定义属性</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <child message="helloppp!"></child>
    
    <div>
        <input v-model="parentMsg">
        <br>
        <child v-bind:message="parentMsg"></child>
    </div>

    <ol>
      <a>aaaaa</a>
        <My_com v-for="item in sites" v-bind:todo="item"></My_com>
    </ol>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
Vue.component('My_com', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容',
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>
注册组件名使用名结果
MycomMycom正确
Mycommycom正确
MycomMyCom正确
MycommyCom正确
MycomMYCom正确
注册组件名使用名结果
mycommycom正确
mycomMycom正确
mycomMyCom正确
mycommyCom正确
mycomMYCom正确
mycommYCom正确
注册组件名使用名结果
MyComMyCom错误
MyComMycom错误
MyCommycom错误
MyCommyCom错误
注册组件名使用名结果
MyComMy-Com正确
MyComMy-com正确
MyCommy-com正确
MyCommy-Com正确
注册组件名使用名结果
My_ComMy_Com错误
My_Commy_Com错误
My_Commy_com错误
My_ComMy_com错误
My_Commy_-com正确
My_ComMy_-Com正确
注册组件名使用名结果
My_commy_com正确
My_commy_Com正确
My_comMy_Com正确
My_comMy_com正确
注册组件名使用名结果
my_commy_com正确
my_commy_Com正确
my_comMy_Com正确
my_comMy_com正确

测试结果如上发现只要你前面注册的时候满足了命名规则,那么在使用的时候就是不区分大小写的。如果不符合命名规则,那么怎么使用都是错误的

2.DOM中使用规则

首先根据上面我们测试的结果,以及查询资料可知,注册的时候,首字母可以大小写,后面的字母也可以大小写,但是在DOM中使用的时候大写字母前面需要用-隔开,并且使用的时候完全不区分大小写,只要注意大写字母前加-即可。例如:注册“MyAppEds”,使用“My-App-Eds”。**注意:组件闭合标签比较随意,组件的闭合标签是不需要加-符号,也不用区分大小写就可以被识别的。**也就是说你像下面这么使用是完全没有问题的。
3.

//使用组件
<my-co-me v-for="item in sites" v-bind:todo="item"></mYCo-me>
//注册组件
Vue.component('MyCoMe', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

3.template中使用

在template中使用时,还可以直接使用注册时的大写名字,例如注册“MyChild”,使用“MyChild”,或者首字母小写“myChild”也可以,另外如果使用加-的方式引用时,注意不像在DOM中使用一样,完全不区分大小写,只有在用-隔开的首字母才可以不区分大小写。

注册组件名使用名结果
MyChildMyChild正确
MyChildMy-Child正确
MyChildmy-Child正确
MyChildMy-child正确
MyChildmy-child正确
MyChildMy-Child正确
MyChildmyChild正确
MyChildmychild错误
MyChildmY-Child错误
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
    </div>
    <script>
        var MyChild = {
            methods : {
                changee : function(){
                    //此处this对象的parent和root都是vm
                    console.log(this);
                }
            },
            data : function(){
                return {
                    mes : '子组件'
                }
            },
            template : '<div>{{mes}}<button @click="changee">点击</button></div>'
        }
        var vm = new Vue({
            el: '#app',
            data : {
                msg : '黄瓜'
            },
            components : {
                MyChild
            },
             template : '<MyChild></MyChild>'
        });
        console.log(vm);
    </script>
</body>
</html>

3.总结

组件注册可以任意取名字,只要在DOM中使用的时候将大写字母前加 - 即可(首字母大写除外)。在template中使用还可以直接使用注册时的名字。情况太多了,为了避免混乱,建议D统一在Dom 和Template中都使用大写字母前加-的方法,然后大写字母变小写。例如注册MyComponentName使用my-component-name

Logo

前往低代码交流专区

更多推荐