最近在梳理一个项目的业务，前端采用的是vue框架，之前没怎么涉及过，自认为虽然没做过VUE开发，至少能看懂代码吧，谁知道看到第一个vue文件就懵逼了，代码如下图：
看到了吗？？看到了吗？？1和2还能推理出来关系，看到3这儿就彻底傻眼了，整个工程里边都搜索不到这个带中横线的标签，虽然隐隐约约猜到是根据1、2来的，但找不到依据，那叫一个难受啊。。。立马把我的强迫症召唤出来的，找人问、网上搜，终于找到了答案，下面从两个方面对vue组件命名进行理解：
—————————————1、官网—————————————首先看Vue.js官网说明：https://cn.vuejs.org/v2/guide/components-registration.html
组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说
————————————2、网上大神————————————内容来源：
https://blog.csdn.net/qq_43650979/article/details/105839130
vue组件的驼峰式命名与短横线分割命名
1.注册组件的时候使用了驼峰命名
如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名
<html lang="en"><head> <meta charset="UTF-8"> <title>组件命名title> <script src="js/vue.js">script>head><body><div id="app"> <my-son>my-son>div><template id="son"> <div> <p>......p> div>template><script> Vue.component("mySon", { // 注册时：驼峰式命名 template: "#son", }); let vue = new Vue({ el: '#app', });script>body>html>
2传递数据时使用驼峰名称
如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名
<html lang="en"><head> <meta charset="UTF-8"> <title>组件命名title> <script src="js/vue.js">script>head><body><div id="app"> <my-son :parent-name="name">my-son>div><template id="son"> <div> <p>{{parentName}}p> div>template><script> Vue.component("mySon", { template: "#son", props:["parentName"] // 驼峰式接收 }); let vue = new Vue({ el: '#app', data:{ name:"test" } });script>body>html>
3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名
<html lang="en"><head> <meta charset="UTF-8"> <title>组件命名title> <script src="js/vue.js">script>head><body><div id="app"> <my-son :parent-name="name" @parent-fn="fn">my-son>div><template id="son"> <div> <button @click="fn">按钮button> <p>{{parentName}}p> div>template><script> Vue.component("mySon", { template: "#son", props:["parentName"], methods:{ fn(){ this.$emit("parent-fn"); // 短横线式接收 } } }); let vue = new Vue({ el: '#app', data:{ name:"test1" }, methods:{ fn(){ console.log("test2"); } } });script>body>html>
转播
