Estoy intentando pasar datos de un componente principal a un componente secundario. Sin embargo, los datos que estoy tratando de pasar se siguen imprimiendo como en blanco en el componente secundario. Mi código:

En Profile.js (componente principal)

<template>

    <div class="container">
        <profile-form :user ="user"></profile-form>
    </div>

</template>

<script>

import ProfileForm from './ProfileForm'

module.exports = {

    data: function () {
        return {
            user: ''
        }
    },

   methods: {

    getCurrentUser: function () {
        var self = this
        auth.getCurrentUser(function(person) {
            self.user = person
        })
    },

}

</script>

En ProfileForm.js (componente secundario)

<template>

<div class="container">
    <h1>Profile Form Component</h1>
</div>  

</template>


<script>


module.exports = {


  created: function () {
    console.log('user data from parent component:')
    console.log(this.user) //prints out an empty string
  },


}

</script>

Nota: mi user se carga a través de mi método getCurrentUser() ... ¿Puede alguien ayudarme?

¡Gracias de antemano!

21
Trung Tran 29 ago. 2016 a las 08:52

2 respuestas

La mejor respuesta

Para pasar datos a través de accesorios, debe declararlos en el componente secundario:

module.exports = {   
  props: ['user'],

  created: function () {
    console.log('user data from parent component:')
    console.log(this.user) //prints out an empty string
  }
}
35
pkawiak 29 ago. 2016 a las 06:15

Tenga en cuenta lo siguiente:

  • te perdiste la línea que detalla 'Vue.component'
  • necesitas definir los accesorios pasados ​​en el componente secundario
  • debe llamar a getCurrentUser () cuando el componente principal se inicializa

Componente principal ...

<template>

    <div class="container">
        <profile-form :user="user"></profile-form>
    </div>

</template>

<script>

import ProfileForm from './ProfileForm'
Vue.component('profile-form', ProfileForm);
export default {

    data: function () {
        return {
            user: ''
        }
    },

   methods: {
       getCurrentUser: function () {
           auth.getCurrentUser(function(person) {
           this.user = person
       })
   },
   created: function() {
       this.getCurrentUser();
   },
}

</script>

Componente hijo ...

<template>

    <div class="container">
        <h1>Profile Form Component</h1>
    </div>  

</template>
<script>
    export default {
        props: ['user'],
        created: function () {
            console.log('user data from parent component:')
            console.log(this.user) //prints out an empty string
        },
    }
</script>
9
Caveman 5 nov. 2018 a las 10:48