web-dev-qa-db-ja.com

vue.jsで親コンポーネントから子コンポーネントにデータを渡す

親から子コンポーネントにデータを渡そうとしています。ただし、渡そうとしているデータは、子コンポーネントで空白として印刷され続けます。私のコード：

_Profile.js_（親コンポーネント）

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

_ProfileForm.js_（子コンポーネント）

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

注-userはgetCurrentUser()メソッドを介してロードされます...誰か助けてもらえますか？

前もって感謝します！

componentsvue.js
15
Trung Tran

小道具を介してデータを渡すには、 子コンポーネントでそれらを宣言する する必要があります。

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

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

次の点に注意してください：

  • 「Vue.component」を詳述する行を逃した
  • 子コンポーネントに渡される小道具を定義する必要があります
  • 親コンポーネントの初期化時にgetCurrentUser（）を呼び出す必要があります

親コンポーネント...

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

子コンポーネント...

<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