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

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: '{{ message }}'
})
Vue.component('My_com', {
  props: ['todo'],
  template: '
  • {{ todo.text }}
  • '
    }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容', sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script> </body> </html>
    注册组件名 使用名 结果
    Mycom Mycom 正确
    Mycom mycom 正确
    Mycom MyCom 正确
    Mycom myCom 正确
    Mycom MYCom 正确
    注册组件名 使用名 结果
    mycom mycom 正确
    mycom Mycom 正确
    mycom MyCom 正确
    mycom myCom 正确
    mycom MYCom 正确
    mycom mYCom 正确
    注册组件名 使用名 结果
    MyCom MyCom 错误
    MyCom Mycom 错误
    MyCom mycom 错误
    MyCom myCom 错误
    注册组件名 使用名 结果
    MyCom My-Com 正确
    MyCom My-com 正确
    MyCom my-com 正确
    MyCom my-Com 正确
    注册组件名 使用名 结果
    My_Com My_Com 错误
    My_Com my_Com 错误
    My_Com my_com 错误
    My_Com My_com 错误
    My_Com my_-com 正确
    My_Com My_-Com 正确
    注册组件名 使用名 结果
    My_com my_com 正确
    My_com my_Com 正确
    My_com My_Com 正确
    My_com My_com 正确
    注册组件名 使用名 结果
    my_com my_com 正确
    my_com my_Com 正确
    my_com My_Com 正确
    my_com My_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: '
  • {{ todo.text }}
  • '
    })

    3.template中使用

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

    注册组件名 使用名 结果
    MyChild MyChild 正确
    MyChild My-Child 正确
    MyChild my-Child 正确
    MyChild My-child 正确
    MyChild my-child 正确
    MyChild My-Child 正确
    MyChild myChild 正确
    MyChild mychild 错误
    MyChild mY-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 : '
    {{mes}}
    '
    } var vm = new Vue({ el: '#app', data : { msg : '黄瓜' }, components : { MyChild }, template : '' }); console.log(vm); </script> </body> </html>

    3.总结

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

    你可能感兴趣的:(js,vue,组件)