1. Hay dos formas de definir los nombres de los componentes:
Usar caja de kebab
Cuando use kebab-case (nombre separado por guiones) para definir un componente,
también debe usar kebab-case al hacer referencia a este elemento personalizado, por ejemplo.
Vue.component('my-component-name', {
/* ... */ })
Utilice PascalCase
Al definir un componente usando PascalCase (nombre con letras mayúsculas iniciales), puede usar ambas nomenclaturas al hacer referencia a este elemento personalizado. Es decir, ambos son aceptables. Tenga en cuenta que a pesar de esto, solo el caso de kebab es válido cuando se usa directamente
en el DOM (es decir, plantillas que no son cadenas).
Vue.component('MyComponentName', {
/* ... */ })
2. Usos específicos en el proyecto:
<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. Resumen:
Tipos de métodos de nomenclatura: helloVue (Camel Case es la nomenclatura de camel-case), HelloVue (PascalCase es la nomenclatura de Pascal). Por
si acaso, la nomenclatura de Pascal se usa de manera uniforme al nombrar,
pero el método de nomenclatura de kebab-case se usa uniformemente cuando usando
4. Cómo se renderizan los componentes:
Llamar al componente directamente en el DOM (el código anterior es de esta manera)
todos los elementos del componente de llamada se analizarán como letras minúsculas, por ejemplo, se analizarán como, y luego para que coincida con el nombre del componente, el orden del componente coincidente los nombres son: hello-vue (minúsculas completas), helloVue (Camel Case es el método de nomenclatura de camello), HelloVue (PascalCase es el método de nomenclatura de Pascal), si puede hacer coincidir el componente, puede hacer que el componente surta efecto.