Comunicación entre componentes de vue
Cuando el anidamiento de componentes de varios niveles necesita pasar datos, el método común es a través de vuex. Pero si solo transmite datos sin procesamiento intermedio, usar vuex para el procesamiento es un poco excesivo. Para este propósito, la versión 2.4 de Vue proporciona otro método: $attrs;
Ejemplo:
Pasamos 5 atributos al hijo del subcomponente y luego el hijo del subcomponente pasa 4 atributos a el componente nieto el domingo (estos cuatro componentes no hacen más que pasarlos. Los cuatro atributos pasados del componente hijo al componente nieto pueden ser v-bind=$attrs).
Usualmente usado junto con $attrs.
En pocas palabras, los $attrs de los subcomponentes que usan interitAttrs: false no se presentarán en el elemento raíz como atributos html, lo que evita la modificación de atributos html con el mismo nombre.
Usa esto. $emit('nombre de evento personalizado', datos) en la página del componente secundario pasa los datos al componente principal, que pasa @custom event name = "nombre del método de manejo de eventos" o v-on:custom event name = "manejo de eventos" nombre del método "Obtener el valor pasado por el componente secundario.
Si muchos componentes llaman a un componente público y los eventos personalizados generados son diferentes, puede usar $listeners para decidir qué evento personalizado lanzar según el evento llamado por el componente principal.
EventBus también se denomina bus de eventos. En Vue, el concepto de EventBus se puede usar como un puente de comunicación, al igual que todos los componentes * * * usan el mismo centro de eventos y pueden registrarse para enviar o recibir eventos, por lo que todos los componentes pueden notificar a otros componentes en paralelo, pero también Es conveniente, por lo que si se usa sin cuidado, puede causar desastres difíciles de mantener. Por lo tanto, se necesita un Vuex más completo como centro de gestión de estado para elevar el concepto de notificación a un nivel * * *. Más EventBus
Sitio web oficial de Vuex
Vuex implementa un flujo de datos unidireccional y tiene un estado para almacenar datos globalmente. Cuando un componente quiere cambiar datos en el estado, debe hacerlo mediante mutaciones. Mutation también proporciona un patrón de suscriptor para que los complementos externos llamen y obtengan actualizaciones de los datos de estado. Pero cuando todas las operaciones asincrónicas (generalmente llamando a la interfaz de backend para obtener datos actualizados de forma asincrónica) o las operaciones de sincronización por lotes requieren acciones, pero las acciones no pueden modificar directamente el estado, los datos del estado aún deben modificarse mediante mutación. Finalmente, se presenta en la vista de acuerdo con los cambios de estado.
Proporcionar/inyectar una introducción al sitio web oficial
Vue2.2.0 ha agregado una API que debe usarse en conjunto para permitir que un componente ancestro inyecte una dependencia en todos sus descendientes, independientemente de nivel de componente profundo, siempre tendrá efecto cuando se establezcan sus relaciones ascendentes y descendentes. Si está familiarizado con React, esto es muy similar a la función contextual de React.
Proporcionar/inyectar API resuelve principalmente problemas de comunicación entre componentes de niveles cruzados. El sitio web oficial proporciona una introducción muy detallada y aquí está la imagen directamente arriba.
Como se puede ver en la Figura 8-1, esto. $children obtiene la matriz de columnas vue reales.
Como se puede ver en la Figura 8-2, esto. $parent obtiene la instancia principal directa.
Como se puede ver en la Figura 8-3, esto. $refs devuelve el objeto registrado con ref.
SessionStorage y localStorage también pueden comunicarse, pero es necesario monitorear los cambios en el almacenamiento. En este artículo ya se ha escrito cómo monitorear los cambios de almacenamiento, por lo que no entraré en detalles aquí.
Seis métodos de comunicación entre componentes de vue