在 vue.js 中将数据从父组件传递到子组件答案

【问题标题】：Pass data from parent to child component in vue.js在 vue.js 中将数据从父组件传递到子组件
【发布时间】：2017-01-05 01:47:33
【问题描述】：

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

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

提前致谢！

【问题讨论】：

标签： components vue.js

【解决方案1】：

要通过 props 传递数据，你必须 declare them in child component:

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

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

【讨论】：

这可以附加到孩子的data对象中的另一个元素吗？

【解决方案2】：

请注意以下几点：

您错过了详细说明“Vue.component”的行
需要定义子组件传入的props
父组件初始化时需要调用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>

【讨论】：

【解决方案3】：

Vue.component("parent-component", {
        props: ["title"],
        data() {
          return {
            todos: this.title,
          };
        },
        provide() {
          return {
            todoLength: this.todos,
          };
        },
        template: "<div></slot> <slot></slot></div>",
      });
      Vue.component("child-component", {
        inject: ["todoLength"],
        template: "<div>{{this.todoLength}} </div>",
      });
      var APP = new Vue({
        el: "#app",
        data: {
          message: "You loaded this page on " + new Date().toLocaleString(),
        },
        component: ["parent-component", "child-component"],
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <parent-component title="Hello from parent component to child component">
        <child-component></child-component>
      </parent-component>
    </div>

【讨论】：