Varias posturas para la comunicación del componente Vue.js
Porque estoy interesado en Vue.js, y la pila de tecnología en la que normalmente trabajo también es Vue.js, así que dediqué algún tiempo a investigar y aprender un poco del código fuente de Vue. js en los últimos meses. E hice un resumen y un resultado.
La dirección original del artículo es: /answershuto/learnVue.
Durante el proceso de aprendizaje, agregué comentarios en chino a Vue /answershuto/learnVue/tree/master/vue-src, con la esperanza de ser útiles para otros amigos que quieran aprender el código fuente de Vue.
Puede haber desviaciones en la comprensión, bienvenido a hacer preguntas y señalar, *** aprender juntos, *** progresar juntos.
¿Qué son los componentes de Vue?
Los componentes son una de las características más poderosas de Vue.js. Los componentes amplían elementos HTML y encapsulan código reutilizable. En un nivel alto, los componentes son elementos personalizados a los que el compilador Vue.js agrega una funcionalidad especial. En algunos casos, los componentes también pueden tener la forma de elementos HTML nativos, ampliados mediante la función is.
Comunicación entre componentes de Vue
Comunicación entre el componente principal y el componente secundario
Método 1: Accesorios
A través de accesorios, los componentes principales pueden usar accesorios para pasar datos a componentes secundarios.
Plantilla de vue del componente principal padre.vue
lt;templategt;
lt;child: msg="message"gt;lt;/childgt;
p>
lt;/templategt;
lt;scriptgt;
importar niño desde './child.vue'; >exportar componentes predeterminados {
: {
hijo
},
datos () {
devolver {
mensaje: 'mensaje del padre ';
}
}
}
lt;/scriptgt ;
componente hijo plantilla vue hijo. vue
lt;templategt;
lt;divgt;{{msg}}lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
accesorios: {
mensaje: {
tipo: verdadero
}
}
}
lt;/scriptgt;
Método 2 usando $children
El uso de $children le permite acceder a los componentes secundarios desde el componente principal.
Comunicación del componente secundario al componente principal
Método 1: usar eventos vue
El componente principal pasa el método de evento al componente secundario, y el componente secundario pasa $emit Activa un evento y vuelve a llamar ese evento al componente principal.
La plantilla vue del componente principal padre.vue
lt;templategt;
lt;child @msgFunc="func"gt;lt;/childgt ;
lt;/templategt;
lt;/templategt;
lt;scriptgt;
importar niño desde './child .vue ';
exportar componentes {
predeterminados: {
hijo
},
métodos: {
func (msg) {
console.log(msg
}
}
}
}
lt;/scriptgt;
componente secundario plantilla vue child.vue
lt;templategt;
lt;botón @click="handleClick" gt;clic en fundir;/buttongt;
lt;/templategt;
lt;scriptgt;
exportar accesorios predeterminados {
: {
msg: {
tipo.Cadena,
requerido: verdadero
}
},
métodos () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
}
lt;/scriptgt;
Método 2: modificar los datos del componente principal modificando los accesorios pasados por el componente principal
Este método solo se puede utilizar cuando el El componente principal pasa una variable de referencia; las variables literales no pueden lograr el mismo efecto. Dado que la variable de referencia finalmente apuntará a la misma dirección de memoria de los datos en el componente principal y los datos en la propiedad del componente secundario, modificar los datos en la propiedad del componente secundario modificará los datos del componente principal.
Pero no se recomienda hacer esto, ni se recomienda modificar los accesorios directamente. Si los datos se usan para mostrar cambios, en la práctica generalmente los pongo en datos y luego los paso de regreso al componente principal a través de un evento cuando es necesario devolverlos al componente principal. Esto no solo mantiene la independencia y el desacoplamiento de los componentes, sino que tampoco causa un flujo de datos anormal debido al uso de los mismos datos. Los datos solo se transmiten a través de una interfaz específica para modificar los datos, y el estado de los datos internos lo determina Specialized. gestión de datos.
Método 3: Usar $parent
Utilice $parent para acceder a los datos del componente principal.
Transmisión de datos entre componentes no principales y componentes secundarios, y componentes hermanos
Para la comunicación entre componentes no principales y componentes secundarios, los funcionarios de Vue recomiendan utilizar una instancia de Vue como evento central. autobús.
Vue tiene un mecanismo de eventos interno, consulte el código fuente.
El método $on se utiliza para escuchar eventos.
$emit se utiliza para activar eventos.
/* Crear una nueva instancia de Vue como maestro de eventos central*/
let event = new Vue()
/* Escuchar eventos* /
event.$on('eventName', (val) =gt; {
//...haz algo
}) ;
/* Evento desencadenante**
event.$emit('eventName', 'este es un mensaje.');
Componente multicapa padre-hijo Comunicación :
Los métodos $broadcast y $dispatch se implementan en Vue 1.0. Los métodos $broadcast y $dispatch se implementan en Vue 1.0 para transmitir a componentes secundarios (o principales) (o envío) eventos, cuando el El componente secundario (o principal) escucha el evento y devuelve verdadero, continuará transmitiendo (o enviando) el evento a sus componentes descendientes. Pero este método se eliminó en Vue 2.0.
Cuando conocí el elemento de la biblioteca de componentes de código abierto de HungryMan, descubrí que reimplementaron los métodos de transmisión y programación e introdujeron estos dos métodos en forma de mixins, que se pueden encontrar en "Hablar sobre la biblioteca de componentes de elementos". " Se encuentra en "Difusión y programación". Sin embargo, la implementación de estos dos métodos es ligeramente diferente a la de Vue 1.0. Estos dos métodos implementan la función de transmitir eventos a descendientes y nietos, y enviar eventos a componentes principales de múltiples capas. Sin embargo, no son eventos de transmisión en el sentido más amplio; requieren especificar un nombre de comentario para transmitir (enviar) el evento al componente con el nombre de componente especificado.
De hecho, la implementación interna de estos dos métodos todavía usa $parent y $children, que se usan para atravesar nodos secundarios o consultar los nodos principales paso a paso, y llamar a $emit al acceder al nombre del componente especificado. Activa el evento especificado.
Gestión de datos para aplicaciones complejas de una sola página
Cuando la aplicación es lo suficientemente compleja, se puede utilizar vuex para la gestión de datos.
Resumen
Las anteriores son varias posturas de comunicación del componente Vue.js introducidas por el editor. Espero que sean útiles para todos. Si tiene alguna pregunta, déjeme un mensaje. mensaje y responderé a todos lo antes posible. ¡También me gustaría agradecerles a todos por su apoyo al sitio web de Script House!