vue 组件（component）命名的小细节问题（大小写问题）

vue 组件命名的小细节问题（大小写问题）今天学习组件的时候，突然发现，定义的名为”Mycom"的组件在使用的时候用“mycom”使用没有任何问题，于是我就试了一下哪种情况可以，哪种情况不可以。首先说明一下，我注册的是全局组件。1.简单测试结果<!DOCTYPE html><html><head><meta charset="utf-8"><t

Je pense a toii

7591人浏览 · 2020-11-24 18:42:05

Je pense a toii · 2020-11-24 18:42:05 发布

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>

注册组件名	使用名	结果
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: '<li>{{ todo.text }}</li>'
})

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 : '<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。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^