vue component - pasar - Cómo compartir datos entre componentes en VueJS

pasar parametros entre componentes vue

Question

Tengo una aplicación VueJS bastante simple, 3 componentes (Iniciar sesión, Seleccionar algo, Hacer cosas)

El componente de inicio de sesión es solo un formulario para el usuario y la entrada de paso, mientras que el segundo componente necesita mostrar algunos datos obtenidos en el progreso del inicio de sesión.

¿Cómo puedo compartir datos de un componente a los otros? ¿De modo que cuando dirijo al segundo componente todavía tengo los datos obtenidos en el inicio de sesión?

Answer 1

En Vue.js, los componentes pueden comunicarse entre sí utilizando props o events . Todo depende de la relación entre tus componentes.

Tomemos este pequeño ejemplo:

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

Para enviar información del padre a su hijo, necesitará usar accesorios:

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: ''Send this variable to the child''
  }
 }
}
</script>

Para enviar información del niño al padre, deberá usar los eventos:

Componente infantil

<script>
 ...
 this.$emit(''example'', this.variable);
</script>

Componente principal

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

Consulte la documentación de vue.js para obtener más información sobre este tema. Esta es una introducción muy breve.

Answer 2

Puede usar props o un bus de eventos, donde podrá emitir un evento desde un componente y escuchar en otro

vm.$on(''test'', function (msg) {
  console.log(msg)
})

vm.$emit(''test'', ''hi'')
// -> "hi"