1. There are two ways to define the component name:
Use kebab-case
When using kebab-case (name separated by dashes) to define a component,
you must also use kebab-case when referencing this custom element, for example.
Vue.component('my-component-name', {
/* ... */ })
Use PascalCase
When defining a component using PascalCase (name with initial capital letters), you can use both nomenclatures when referencing this custom element. That is to say, both are acceptable. Note that despite this, only kebab-case is valid when used directly
in the DOM (ie non-string templates).
Vue.component('MyComponentName', {
/* ... */ })
2. Specific usage in the project:
<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. Summary:
Types of naming methods: helloVue (Camel Case is the camel-case nomenclature), HelloVue (PascalCase is the Pascal nomenclature).
Just in case, the Pascal nomenclature is used uniformly when naming,
but the kebab-case naming method is uniformly used when using
4. How the components are rendered:
Calling the component directly in the DOM (the code above is this way)
all the elements of the calling component will be parsed as lowercase letters, for example, will be parsed as, and then to match the component name, the order of matching component names is: hello-vue (full Lowercase), helloVue (Camel Case is the camel case naming method), HelloVue (PascalCase is the Pascal naming method), if you can match the component, you can make the component take effect.