Tabla de contenido
Primero, la relación jerárquica de los componentes globales
En segundo lugar, la relación jerárquica de los componentes locales
prefacio
Antes de eso, hemos aprendido qué son los componentes de Vue y qué hacen. Para blogs sobre componentes, puede leer los blogs anteriores del blogger: [Vue cinco minutos] Cinco minutos le permitirán entender los componentes de Vue_ Cupid Punishes Lu's Blog - CSDN Blog
Puede seguir más publicaciones de blog para obtener más información. Bien, entremos en el tema de hoy, sabemos que los componentes se pueden llamar, y las páginas web se pueden anidar en páginas dividiéndolas, y las relaciones entre padres e hijos y a nivel de hermanos se pueden formar a nivel de componente, lo que facilita el desarrollo de páginas web. ricas capas.
Primero, la relación jerárquica de los componentes globales
La relación jerárquica entre los componentes globales se determina cuando Vue ejecuta el programa de código. Podemos aprender sobre él a través del programa de código:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>层级关系</title>
</head>
<body>
<div id="app">
<top></top>
<middle></middle>
<bottom></bottom>
</div>
<template id="N1">
<!-- 我们定义第一个组件 -->
<div>
<h2>第一个 ：NO.1</h2>
<bottom></bottom>
</div>
</template>
<!-- 我们定义第二个组件 -->
<template id="N2">
<div>
<h2>第二个 ：NO.2</h2>
<bottom></bottom>
</div>
</template>
<!-- 我们定义三个组件 -->
<template id="N3">
<div>
<h3>第三个 ：NO.3</h3>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('top',{
template:'#N1'
});
Vue.component('middle',{
template:'#N2'
});
Vue.component('bottom',{
template:'#N3'
});
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>resultado de la operación:
Hemos definido tres componentes globales arriba: superior, medio, inferior, y luego llamamos al componente inferior utilizando los componentes superior e intermedio. A través de esto, sabemos que existe una relación padre-hijo entre superior e inferior, medio e inferior. relación de nivel.
Luego, en el ejemplo, la aplicación llama a tres componentes al mismo tiempo, y los tres componentes están todos en una relación de nivel, por lo que podemos saber que la relación jerárquica entre los componentes se determina en el momento de la invocación.
En segundo lugar, la relación jerárquica de los componentes locales
Hemos entendido la relación de los componentes globales, entonces deberíamos poder decir que la relación jerárquica de los componentes locales es similar.La relación jerárquica entre los componentes locales, cuando se definen, cada componente tiene la opción de configuración de componente. componentes de nivel. Podemos entenderlo a través de un fragmento de código de ejemplo:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>层级关系</title>
</head>
<body>
<div id="app">
<top></top>
</div>
<template id="N1">
<!-- 我们定义第一个组件 -->
<div>
<h2>这里是父组件</h2>
<top-child></top-child>
<middle-child></middle-child>
</div>
</template>
<!-- 我们定义第二个组件 -->
<template id="N2">
<div>
<h2>这里是第一个子组件</h2>
</div>
</template>
<!-- 我们定义三个组件 -->
<template id="N3">
<div>
<h3>这里是第二个子组件</h3>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
components:{
"top":{
template:"#N1",
components:{
"top-child":{
template:"#N2",
},
"middle-child":{
template:"#N3",
}
}
}
}
})
</script>
</body>
</html>resultado de la operación:
Podemos ver que dos subcomponentes top-child y middle-child están configurados en las opciones de configuración del componente en el componente superior. Los dos subcomponentes están nivelados, por lo que la relación entre los dos componentes es nivelada. , el componente principal de ambos son superiores.
Cuando abrimos la vista, podemos ver que el componente principal y el componente secundario no se pueden llamar al mismo tiempo, y la ráfaga llama al componente secundario en el componente principal.