将数据从父级传递到vue.js中的子级组件

Vue.js

猴子GO

2020-03-16

我正在尝试将数据从父级传递到子级组件。但是,我尝试传递的数据在子组件中一直打印为空白。我的代码:

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()方法加载...有人可以帮忙吗?

提前致谢!

第1736篇《将数据从父级传递到vue.js中的子级组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android