Análisis máximo del código fuente de Vue
En el uso de Vue, a menudo se utilizan componentes. Las ventajas son:
1. Si hay una función que se usa en muchos lugares, no es necesario escribir esta función repetidamente como un componente
2. la página será más simple ;Control conveniente;
La transferencia de valor de los subcomponentes es transferir datos a través de accesorios y $emit activa eventos;
El siguiente es un subcomponente simple. valor de transferencia de accesorios del componente:
Parte del componente principal:
Primero, introduzca el componente y vincule el valor que desea pasar al componente;
Luego , en el componente, recibe el valor que recibe del componente a través de props. El valor pasado por la página principal, por lo tanto, el componente principal pasa el valor al componente secundario;
El siguiente es un ejemplo de; un componente secundario que pasa un valor al componente principal:
Parte del componente principal:
p>
Sección del componente secundario:
primero < nobr aria- oculto = " verdadero " estilo = " tamaño de caja: cuadro de borde; contorno: 0px margen: 0px relleno: 0px transición: ninguno 0s lento 0s; borde: 0px ancho máximo: Ninguno; altura máxima: Ninguno; ancho mínimo : 0px altura mínima: 0px alineación vertical: 0px altura de línea: normal; decoración de texto: ninguna; espacio en blanco: nowrap importante; familia de fuentes: KaTeX_Main, "Times New Roman", desbordamiento de serifa: separación de palabras; escucha cambios en los valores de entrada y usa
En segundo lugar, transferencia de valor entre componentes hermanos
La transferencia de valor entre componentes hermanos es muy similar a la transferencia entre componentes principales y componentes secundarios. ambos se pasan a través de $emit;
El principio es: una nueva instancia de vue, similar a una estación, conecta dos componentes, es decir, un bus de eventos central;
Lo siguiente es un ejemplo de bus:
1. Cree el componente firstChild, introduzca el bus y luego transmita eventos de acuerdo con los datos vinculantes:
Activamos eventos en la instancia actual (aquí el la instancia actual es el bus) a través de un método de instancia de emisión, y se pasarán parámetros adicionales a la devolución de llamada del oyente.
El siguiente es otro componente que introduce una instancia de bus y recibe datos a través de la etiqueta P:
En el montaje de este componente, escuchamos el evento userDefinedEvent y pasamos emit El evento se pasa con parámetros adicionales.
A continuación es el momento de mostrar el efecto real:
Después de hacer clic:
Resumen:
1, primero cree un bus de eventos. como bus, como puente de comunicación;
2. Úselo en componentes que necesiten transferir valores
Además:
1. componentes y componentes padre-hijo En comparación con la interacción de datos entre los dos, la comunicación entre componentes hermanos es en realidad algo similar a la comunicación entre componentes hijos y componentes padres. De hecho, sus principios de comunicación son los mismos, como el valor del hijo. a padre.
2. Este método de utilizar una instancia de Vue como bus de eventos central para gestionar la comunicación de componentes solo es adecuado para proyectos con requisitos de comunicación simples. Para situaciones más complejas, Vue también proporciona un modo de gestión de estado más complejo para manejar Vuex.