1、定义组件名的方式有两种:
使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时,
你也必须在引用这个自定义元素时使用 kebab-case,例如 。
Vue.component('my-component-name', { /* ... */ })
使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意,尽管如此,直接
在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
Vue.component('MyComponentName', { /* ... */ })
2、项目中的具体用法:
<template>
<el-container class="layout_container">
<el-header height="auto"><header></header></el-header>
<el-container>
<el-aside width="auto"><aside></aside></el-aside>
<el-main><zonghe-nengli></zonghe-nengli>
<skill-hot></skill-hot>
<learning-path></learning-path>
<radar></radar>
<tupu-fenxi></tupu-fenxi>
</el-main>
</el-container>
</el-container>
</template>
<script>
import Header from "../../components/layout/header";
import Aside from "../../components/layout/aside";
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar";
import TupuFenxi from "../../components/common/tupufenxi";
import SkillHot from '../../components/putong/skillhot'
import LearningPath from '../../components/putong/learningpath'
export default {
components: {
Header,
Aside,
ZongheNengli,
Radar,
TupuFenxi,
SkillHot,
LearningPath
},
data() {
return {};
},
created() {},
methods: {},
computed: {},
};
</script>
<style scoped>
.layout_container {
height: 100%;
}
.el-aside {
margin-top: 21px;
background: #ffffff;
box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.35);
}
.el-main {
margin-top: 40px;
margin-left: 37px;
background-color: burlywood;
}
</style>
3、总结:
命名方式种类:helloVue(Camel Case即驼峰命名法),HelloVue(PascalCase即帕斯卡命名法)
为了以防万一,命名的时候统一使用帕斯卡命名法
但是在使用的时候统一使用 kebab-case命名方法
4、组件是怎样渲染的:
在DOM中直接调用组件(上面代码就是此种方式)
调用组件的元素全部会被全部解析为小写字母,比如<Hello-Vue>会被解析为<hello-vue>,然后去匹配组件名,匹配组件名顺序是:hello-vue(全小写),helloVue(Camel Case即驼峰命名法),HelloVue(PascalCase即帕斯卡命名法),如果能够匹配到组件,就可以使组件生效。