Este artículo es un tutorial más detallado e integral compilado por el editor en combinación con documentos oficiales. Es muy bueno y es más adecuado para principiantes.
Este artículo proviene del documento oficial:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe111
Comunicación de componentes entre padres e hijos
① Acceda a los componentes infantiles, los componentes principales y los componentes de la raíz;
esto. $ Componente principal de acceso principal
esto. $ Children accede a los componentes infantiles (es una matriz)
Esto. $ Root el descendiente de la instancia raíz accede a la instancia raíz
Código de muestra:
<div id = "app"> componente principal: <input v-model = "val"> <br/> componente infantil: <test: test = "val"> </pest> </div> <script> var vm = new vue ({el: '#App', data: {val: 1}, componentes: {test: {props: ['test'], template: "<pinte @keyup = 'fintter = v-Model = 'Test'/> ", Métodos: {findParent: function () {console.log (this. $ parent); // Acceda al componente raíz Console.log (this. $ parent.val); // Acceda al componente de la propiedad del componente raíz (this. $ // verifique si el componente principal y el componente raíz son congruentes (porque su componente principal es el componente raíz)}}}}}}); </script>Cuando las teclas aparecen en el cuadro de entrada del subcomponente, los contenidos mostrados son:
El valor del cuadro de entrada del componente principal y el componente principal (el valor predeterminado es 1), 0 (representa que es el primer elemento en el atributo infantil del componente principal) y verdadero (porque el componente principal es el componente raíz, es congruente);
De esta manera, la interacción se puede realizar en el árbol de componentes.
② Eventos de Custom:
En primer lugar, los eventos deben colocarse en la propiedad de eventos en lugar de en la propiedad de métodos (un error que es probable que cometan los novatos). Solo pueden activar eventos en la propiedad de eventos, mientras que los eventos en los métodos de propiedad no pueden activarse.
En segundo lugar, hay una diferencia entre la distribución ascendente y la transmisión hacia abajo: la distribución ascendente activará un evento del mismo nombre, mientras que la transmisión hacia abajo no lo hará;
Tercero, la distribución ascendente y la transmisión hacia abajo solo activarán eventos para líneas directas (niños o padres, excluyendo antepasados y nietos) por defecto, y continuará en esta línea a menos que el valor de retorno del evento sea cierto.
Cuarto, el evento no puede llamarse explícitamente a través de esto. Nombre del evento.
Código de muestra:
<div id = "app"> componente parent: <botón @click = "parentClick"> Haga clic para propagar la transmisión hacia abajo </botón> <br/> componente infantil 1: <Children1> </children1> <br/> otro componente infantil: <otro children1> </otro children1> </div> <script> var vm = nuevo vue ({el: '#app', data: data: data: {{{{{{{{{{{{{{{ {{{{{{{{{ {{{{{Vue: {{{{Val ParentClick: Function () {this. $ Broadcast ("ParentClick", "ABC"); y no continuará siendo distribuidos: ['Test'], Template: "<boton> Children1 </boton> </br> Subcomponent 2: <Children2> </children2>", Events: {Childrenclick: function () {Console.log ("Childrenclick-Children1"); console.log ("ParentClick-Children1"); ChildRenclick: function () {console.log ("ChildRenclick-children2"); Continúe distribuyendo accesorios a los componentes infantiles del componente infantil: ['Test'], plantilla: "<boton> OtroChildren1 </boton> </br> Otro componente infantil 2: <Otro-Children2> </otro Children2>", Events: {ChildRenclick: function () {Console.log ("Childrenclick-anotherChrenchildild"); (msg) {console.log ("ParentClick-AnotherChildren1"); this. $ statt ('ChildRenclick'); }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Ial }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Ial }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} Ial }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}ilustrar:
【1】 Haga clic en el botón del componente principal, y se transmitirá hacia abajo y luego activará el componente infantil 1, otro componente infantil 1 y otro componente infantil 2;
【2】 Haga clic en el botón del componente infantil 2 activará el evento del componente infantil 2 y el evento del componente infantil 1, pero no activará el botón del componente principal;
【3】 Haga clic en el botón de otro componente infantil 2 activará el evento de otro componente infantil 2, el evento de otro componente infantil 1 y el evento del componente principal (porque el valor de retorno del evento de otro componente infantil 1 es verdadero);
③ Use V-On para vincular eventos personalizados:
[1] En pocas palabras, cuando un componente infantil desencadena un evento (el método en los eventos), el componente principal también ejecutará un método (el método en los métodos del componente principal).
[2] La unión activada se escribe en la plantilla (es decir, la plantilla de plantilla que se reemplaza). Múltiples componentes infantiles pueden unir un método de componente principal, o diferentes componentes infantiles pueden unir un método de componente principal diferente, pero el mismo evento de componente infantil no puede unir un método.
【3】 El componente infantil envía parámetros para el paso de mensajes. Incluso si el evento del componente infantil no tiene parámetros, no afecta el método de pasar los parámetros al componente principal (es decir, el método del componente principal puede aceptar parámetros obtenidos por el método de componente infantil)
Como ejemplo:
<div id = "app"> componente principal: <botón> Haga clic para propagar la transmisión </boton> <br/> componente infantil 1: <!-El enlace se escribe aquí. Los enlaces múltiples pueden estar vinculados al mismo, o los enlaces diferentes son diferentes, pero múltiples no se pueden unir a uno-> <children v-on: test = "parent" @test2 = "other"> </children> </div> <script> var vm = new vue ({el: '#app', data: {val: 1}, métodos: {parent: function (arg) {console.log (consultor); consultor); evento ");}, otro: function () {console.log (" otro método ");}}, componentes: {niños: {// Esto no tiene valor de retorno y no continuará siendo distribuido: ['test'], template:" <button @click = 'ChildClick'> Children1 </boton> </br> <button @click = 'ChildClick2'> Boton. ChildClick: function () {this. $ emit ("test", 'el argumento para el despacho'); }); </script>④ index index Índice de subcomponentes
En pocas palabras: puede obtener directamente subcomponentes del índice, y luego puede llamar a los métodos de cada subcomponente.
El método para agregar el índice es: Agregar V-Ref a la etiqueta: nombre del índice
El método de llamar al componente es: VM. $ Ref. Nombre del índice
También puede usar esto. $ Ref. Nombre del índice directamente en el componente principal
En este momento, puede obtener el componente, y luego el componente puede llamar a sus métodos o usar sus datos.
Código de muestra:
<div id = "app"> componente principal: <botón @click = "tODO"> Eventos que activan el componente infantil </boton> <br/> subcomponente 1: <!-El enlace se escribe aquí. Los enlaces múltiples pueden estar vinculados al mismo, o los enlaces diferentes son diferentes, pero múltiples no se pueden unir a uno-> <children v-ref: child> </shils> </div> <script> var vm = new vue ({el: '#app', métodos: {toDo: function () {this. $ Refs.child.fromparent (); // llamando a los componentes de los hijos de los hijos a través de el método de comparación a través del Índice Índico: {// Esto no tiene valor de retorno y no continuará distribuyendo accesorios: ['Test'], plantilla: "<boton> children1 </boton>, métodos: {fromparent: function () {console.log (" Wapped fromparent por ref "); </script>Lo anterior es el artículo VueJS 10th Vuejs Commonent Communicion Communication Introduced a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!