web-dev-qa-db-fra.com

Passer des données du composant parent au composant enfant dans vue.js

J'essaie de transmettre des données d'un parent à un composant enfant. Cependant, les données que j'essaie de transmettre continuent de s'imprimer comme vides dans le composant enfant. Mon code:

Dans Profile.js (Composant parent)

<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>

Dans ProfileForm.js (Composant enfant)

<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>

Remarque - mon user est chargé via ma méthode getCurrentUser() ... Quelqu'un peut-il aider?

Merci d'avance!

componentsvue.js
15
Trung Tran

Pour transmettre des données via des accessoires, vous devez les déclarer dans le composant enfant :

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

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

Veuillez noter ce qui suit:

  • vous avez raté la ligne détaillant 'Vue.component'
  • vous devez définir les accessoires passés dans le composant enfant
  • vous devez appeler getCurrentUser () lorsque le composant parent s'initialise

Composant parent ...

<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>

Composant enfant ...

<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>
5
omarjebari