Cómo pasar datos entre componentes en Vue.js

1. 1. Uso de accesorios para compartir datos de padres a hijos
   1. Consejo: verifica siempre tus accesorios
   2. Consejo: siga las convenciones de nomenclatura de accesorios
2. 2. Emitir eventos para compartir datos de niño a padre
   1. Crear un evento personalizado
   2. Consejo: los eventos personalizados pueden aceptar argumentos
3. 3. Uso de Vuex para crear un estado compartido a nivel de aplicación
   1. Accediendo a los componentes internos de Vue Store
   2. 1. Estado
   3. 2. captadores
   4. 3. Mutaciones
   5. 4. Acciones
4. Terminando
   1. Otras lecturas

Con tantas formas diferentes de compartir datos entre componentes, debe saber qué técnica es mejor para su situación. Analicemos tres de las formas más comunes de pasar datos en VueJS.

Compartir datos entre componentes es una de las funcionalidades principales de VueJS. Le permite diseñar un proyecto más modular, controlar el alcance de los datos y crear un flujo natural de datos en su aplicación.

A menos que esté creando toda su aplicación Vue en un componente (lo cual no tendría ningún sentido), encontrará situaciones en las que necesitará compartir datos entre componentes.

Al final de este tutorial, conocerá tres formas de hacerlo.

• Usar accesorios para compartir datos de padres a hijos,
• Emitir eventos personalizados para compartir datos de niño a padre,
• Usar Vuex para crear un estado compartido a nivel de aplicación.

Bien, ¡vamos a ello!

Creación de una aplicación con Nuxt

Con Spotify, tus amigos pueden ver lo que estás tocando. ¿Qué pasaría si el resto de Internet también pudiera experimentar su algoritmo? Aprenda a crear su propia aplicación para compartir lo que escucha en Spotify usando Vue.js y Nuxt.Leer un artículo relacionado →

1. Uso de accesorios para compartir datos de padres a hijos

Los accesorios de VueJS son la forma más sencilla de compartir datos entre componentes. Los accesorios son atributos personalizados que podemos otorgar a un componente. Luego, en nuestra plantilla, podemos dar valores a esos atributos y, BAM, ¡pasamos datos de un componente principal a un componente secundario!

Por ejemplo, digamos que estamos trabajando en una página de perfil de usuario y queremos que un componente secundario acepte una propiedad de nombre de usuario. Necesitaremos dos componentes.

1. El componente hijo que acepta el accesorio, lo llamaremos AccountInfo.vue.
2. El componente principal que pasa la propiedad, llamémoslo ProfilePage.vue.

Dentro AccountInfo.vue, podemos declarar los accesorios que acepta usando la opción props. Entonces, dentro de las opciones del componente, hagámoslo como se muestra a continuación.

// AccountInfo.vuetemplate div id='account-info' {{username}} /div/template scriptexport default { props: ['username']}/script

Luego, para pasar los datos del padre ( ProfilePage.vue), los pasamos como un atributo personalizado.

// ProfilePage.vue account-info username='matt' /

Ahora, si cargamos nuestra página, podemos ver que nuestro AccountInfocomponente representa correctamente el valor pasado por su padre.

Como cuando trabajamos con otras directivas de VueJS, podemos usar v-bind para pasar accesorios dinámicamente. Por ejemplo, digamos que queremos configurar la propiedad de nombre de usuario para que sea igual a una variable. Podemos lograr esto usando una abreviatura de la directiva v-bind (o simplemente :para abreviar). El código se parecería un poco a esto:

template div account-info :username="user.username" / /div/template scriptimport AccountInfo from "@/components/AccountInfo.vue"; export default { components: { AccountInfo }, data() { return { user: { username: 'matt' } } }}/script

Esto significa que podemos cambiar nuestros datos y hacer que los accesorios secundarios que usen ese valor también se actualicen.

Consejo: verifica siempre tus accesorios

Si buscas escribir código Vue más claro, una técnica importante es verificar tus accesorios. En resumen, esto significa que debes especificar los requisitos de tu accesorio (es decir, tipo, formato, etc.). Si uno de estos requisitos no se cumple (por ejemplo, si a la propiedad se le pasa un tipo incorrecto), Vue imprimirá una advertencia.

Digamos que queremos que nuestro nombre de usuario solo acepte cadenas. Tendríamos que modificar nuestro objeto de accesorios para que se vea así:

export default { props: { username: String }}

Verificar los accesorios es esencial cuando se trabaja en aplicaciones Vue a gran escala o cuando se diseñan complementos. Ayuda a garantizar que todos estén en sintonía y utilicen los accesorios de la forma prevista.

Para obtener una lista completa de las verificaciones que podemos incluir en los accesorios, definitivamente recomiendo consultar la documentación oficial para una revisión en profundidad.

Consejo: siga las convenciones de nomenclatura de accesorios

Según la guía de estilo de VueJS, la mejor manera de nombrar tus accesorios es usarlos camelCaseal declararlos en tu script y kebab-case al hacer referencia a ellos en el código de la plantilla.

El razonamiento detrás de esto es bastante simple. En Javascript, camelCasees la convención de nomenclatura estándar y en HTML, es kebab-case.

Por eso, Vue recomienda que nos atengamos a las normas de cada idioma. Afortunadamente, Vue puede convertir automáticamente entre los dos estilos, por lo que no hay que realizar ninguna configuración adicional para los desarrolladores.

// GOODaccount-info :my-username="user.username" /props: { myUsername: String} // BADaccount-info :myUsername="user.username" /props: { "my-username": String}

2. Emitir eventos para compartir datos de niño a padre

Ahora que tenemos datos que pasan hacia abajo en la jerarquía, pasémoslos al revés: de un componente secundario a uno principal. No podemos usar accesorios, pero podemos usar eventos y oyentes personalizados.

Cada instancia de Vue puede llamar a un .$emit(eventName)método que desencadena un evento. Luego, podemos escuchar este evento de la misma manera que cualquier otro, usando la directiva v-on.

Crear un evento personalizado

Apoyémonos en nuestro ejemplo de perfil de usuario agregando un botón que cambia el nombre de usuario. Dentro de nuestro componente hijo ( AccountInfo.vue), creemos el botón.

Luego, cuando se haga clic en este botón, emitiremos un evento llamado changeUsername.

template div id='account-info' button @click='changeUsername()'Change Username/button {{username}} /div/template scriptexport default { props: { username: String }, methods: { changeUsername() { this.$emit('changeUsername') } }}/script

Dentro del padre, manejamos este evento y cambiamos la user.usernamevariable. Como comentamos anteriormente, podemos escuchar eventos usando la directiva v-on o "@" para abreviar.

template div account-info :username="user.username" @changeUsername="user.username = 'new name'"/ /div/template

Probémoslo. Deberías ver que cuando haces clic en el botón, el nombre de usuario cambia a "nuevo nombre".

Consejo: los eventos personalizados pueden aceptar argumentos

El caso de uso más común para pasar argumentos a sus eventos es cuando desea que un componente secundario pueda establecer un valor específico para su propiedad. Nunca querrás editar directamente el valor de un accesorio desde el propio componente. Aparatos de masajes

Sin embargo, afortunadamente podemos usar argumentos de paso con nuestros eventos personalizados para hacer que el componente principal cambie los valores.

Digamos que queremos modificar el changeUsernameevento para poder pasarle un valor.

El $emitmétodo toma un segundo parámetro opcional como argumento. Entonces todo lo que hacemos es agregar nuestro nuevo valor de nombre de usuario después del nombre de nuestro evento.

this.$emit('changeUsername', 'mattmaribojoc')

Luego, en nuestro componente principal, podemos acceder a estos valores en línea usando una $eventvariable especial o podemos escribir un método de controlador que tome un parámetro.

account-info :username="user.username" @changeUsername="user.username = $event"/ OR account-info :username="user.username" @changeUsername="changeUsername($event)"/ export default {...methods: { changeUsername (username) { this.user.username = username; }}}

3. Uso de Vuex para crear un estado compartido a nivel de aplicación

Bien, sabemos cómo compartir datos entre padres e hijos, pero ¿qué pasa con otros componentes? ¿Tenemos que crear un sistema jerárquico extremadamente complejo si queremos pasar datos?

Afortunadamente no. La maravillosa biblioteca de gestión de estado de Vuex lleva años simplificando la vida de los desarrolladores. En resumen, crea un almacén de datos centralizado al que pueden acceder todos los componentes.

En los métodos que usamos anteriormente (props/emisión de eventos), cada componente tiene su propio estado de datos que luego compartimos entre los componentes. Sin embargo, Vuex nos permite extraer todos los datos compartidos en un solo estado al que cada componente puede acceder fácilmente. Este estado compartido se llama tienda.

Probémoslo.

Debido a que Vuex está separado del código central de Vue, primero tendremos que instalarlo e importarlo a nuestro proyecto. Primero, tendremos que ejecutar npm install vuex --savedentro de la CLI de nuestro proyecto.

Luego, cree una carpeta src/store con un archivo index.js que contenga el siguiente código.

// store/index.js import Vue from "vue";import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}});

Para incluir esto en nuestra instancia raíz de Vue, tenemos que importar nuestro archivo store/index.js y pasarlo a nuestro constructor de Vue.

// main.js import store from "./store"; new Vue({ store, ...

Accediendo a los componentes internos de Vue Store

Desde que agregamos nuestra tienda Vuex a nuestra instancia raíz de Vue, se inyecta en todos los hijos de la raíz. Si queremos acceder a la tienda desde un componente, podemos hacerlo a través de this.$store.

Ahora, profundicemos en los detalles de cada una de las cuatro partes de una tienda Vuec.

1. Estado

El estado de Vuex es un objeto que contiene datos a nivel de aplicación. Todas las instancias de Vue podrán acceder a estos datos.

Para nuestra tienda, creemos un objeto de usuario que almacene más datos de perfil de usuario.

export default new Vuex.Store({ state: { user: { username: 'matt', fullName: 'Matt Maribojoc' } }, getters: {}, mutations: {}, actions: {}});

Podemos acceder a estos datos dentro de cualquier componente de instancia como este.

mounted () { console.log(this.$store.state.user.username);},

2. captadores

Usamos captadores de Vuex para devolver un valor modificado de los datos de estado. Una buena forma de pensar en los captadores es tratarlos como propiedades calculadas. Por ejemplo, los captadores, al igual que las propiedades calculadas, almacenan en caché sus resultados y solo los reevalúan cuando se modifica una dependencia.

Basándonos en nuestra tienda anterior, digamos que queremos crear un método que devuelva el nombre de un usuario basándose en el atributo de nombre completo.

getters: { firstName: state = { return state.user.fullName.split(' ')[0] } }

Las propiedades del captador de Vuex están disponibles para los componentes del store.gettersobjeto.

mounted () { console.log(this.$store.getters.firstName);}

Consejo: conozca los argumentos del captador predeterminado

De forma predeterminada, los captadores de Vuex aceptan dos argumentos.

1. state — el objeto estatal para nuestra aplicación;
2. getters: el objeto store.getters, lo que significa que podemos llamar a otros getters en nuestra tienda.

Cada captador que declare requerirá el primer argumento de estado. Y dependiendo de cómo diseñe su código, sus captadores pueden hacer referencia entre sí utilizando el segundo argumento 'captadores'.

Hagamos un captador de apellido que simplemente elimine el valor de nuestro nombre de nuestra propiedad de estado de nombre completo. Este ejemplo requeriría tanto el objeto state como el getter.

lastName (state, getters) { return state.user.fullName.replace(getters.firstName, '');}

Consejo: pase argumentos personalizados a Vuex Getters

Otra característica interesante de los captadores es que podemos pasarles argumentos personalizados haciendo que nuestro captador devuelva un método.

prefixedName: (state, getters) = (prefix) = { return prefix + getters.lastName;} // in our componentconsole.log(this.$store.getters.prefixedName("Mr."));

3. Mutaciones

Las mutaciones son la única forma de cambiar correctamente el valor del objeto de estado. Un detalle importante a tener en cuenta es que las mutaciones deben ser sincrónicas .

Al igual que los captadores, las mutaciones siempre aceptan la propiedad de estado de Vuex como primer argumento. También aceptan un argumento personalizado, llamado carga útil, como segundo argumento.

Por ejemplo, hagamos una mutación para cambiar el nombre de un usuario a un valor específico.

mutations: { changeName (state, payload) { state.user.fullName = payload }},

Luego, podemos llamar a este método desde nuestro componente usando el store.commitmétodo, con nuestra carga útil como segundo argumento.

this.$store.commit("changeName", "New Name");

La mayoría de las veces querrás que tu carga útil sea un objeto. Esto no solo significa que puede pasar varios argumentos a una mutación, sino que también hace que su código sea más legible debido a los nombres de propiedades de su objeto.

changeName (state, payload) { state.user.fullName = payload.newName}

Hay dos formas diferentes de llamar mutaciones con una carga útil.

1. Puede tener el tipo de mutación como primer argumento y la carga útil como segundo.
2. Puedes declarar pasar un solo objeto, con una propiedad para el tipo y otra para la carga útil.

this.$store.commit("changeName", { newName: "New Name 1",}); // or this.$store.commit({ type: "changeName", newName: "New Name 2"});

No existe una diferencia real entre cómo funcionan los dos, por lo que depende totalmente de las preferencias personales. Recuerde que siempre es mejor ser coherente durante todo el proyecto, así que elija el que elija, ¡siga con él!

4. Acciones

En Vuex, las acciones son bastante similares a las mutaciones porque las usamos para cambiar el estado. Sin embargo, las acciones no cambian los valores en sí. Más bien, las acciones cometen mutaciones.

Además, si bien las mutaciones de Vuex tienen que ser sincrónicas, las acciones no. Usando acciones, podemos llamar a una mutación después de una llamada a la API, por ejemplo.

Mientras que la mayoría de los controladores de Vuex que hemos visto aceptan el estado como parámetro principal, las acciones aceptan un objeto de contexto. Este objeto de contexto nos permite acceder a las propiedades de nuestra tienda Vuex (por ejemplo, estado, confirmación, captadores).

A continuación se muestra un ejemplo de una acción de Vuex que espera dos segundos y luego confirma la changeNamemutación.

actions: { changeName (context, payload) { setTimeout(() = { context.commit("changeName", payload); }, 2000); }}

Dentro de nuestros componentes, utilizamos el método store.dispatch para ejecutar nuestra función. Pasamos argumentos tal como lo hicimos con las mutaciones. Declaramos el tipo y pasamos cualquier argumento personalizado en el segundo argumento.

this.$store.dispatch("changeName", { newName: "New Name from Action"});

Terminando

Ahora, deberías conocer tres formas diferentes de compartir datos entre componentes en VueJS: accesorios, eventos personalizados y una tienda Vuex.

Espero que este tutorial le haya ayudado a obtener más información sobre algunos métodos y mejores prácticas de Vue diferentes. ¡Cuéntame cómo los has implementado en tus proyectos!

Otras lecturas

Si está interesado en profundizar aún más en el aspecto técnico y las capacidades de cada técnica, aquí hay algunos excelentes lugares para comenzar.

• Sitio web de la guía oficial de Vuex
• Documentos VueJS para accesorios y eventos personalizados
• “¿ WTF es Vuex? Una guía para principiantes sobre el almacén de datos de aplicaciones de Vue ”, Anthony Gore, desarrolladores de Vue.js

(dm, yk, il)Explora más en

• vista
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo pasar datos entre componentes en Vue.js

1. Uso de accesorios para compartir datos de padres a hijos2. Emitir eventos para compartir datos de niño a padre3. Uso de Vuex para crear un estado compartid

programar

es

https://aprendeprogramando.es/static/images/programar-como-pasar-datos-entre-componentes-en-vue-1010-0.jpg

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente