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

最新推荐文章于 2023-08-28 23:18:14 发布

啊啊啊～～

最新推荐文章于 2023-08-28 23:18:14 发布

阅读量7k

点赞数 7

分类专栏： js 文章标签： vue 组件

本文链接：https://blog.csdn.net/qq_40891322/article/details/110088559

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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。

啊啊啊～～

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue 组件（component）命名的小细节问题（大小写问题）

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

扫一扫