在 vue.js 中将数据从父组件传递到子组件 [英] Pass data from parent to child component in vue.js
问题描述
我正在尝试将数据从父组件传递到子组件.但是，我尝试传递的数据在子组件中一直打印为空白.我的代码:
在Profile.js(父组件)
<div class="容器"><profile-form :user ="user"></profile-form><脚本>从 './ProfileForm' 导入 ProfileForm模块.出口 = {数据:函数(){返回 {用户:''}},方法: {getCurrentUser: 函数 () {var self = thisauth.getCurrentUser(功能(人){self.user = 人})},}
在ProfileForm.js(子组件)
<div class="容器"><h1>配置文件表单组件</h1><脚本>模块.出口 = {创建:函数(){console.log('来自父组件的用户数据:')console.log(this.user)//打印出一个空字符串},}
注意 - 我的 user 是通过我的 getCurrentUser() 方法加载的...有人可以帮忙吗?
提前致谢！
要通过 props 传递数据，你必须在子组件中声明它们:
module.exports = {道具:['用户']，创建:函数(){console.log('来自父组件的用户数据:')console.log(this.user)//打印出一个空字符串}}I am trying to pass data from a parent to a child component. However, the data I am trying to pass keeps printing out as blank in the child component. My code:
In Profile.js (Parent component)
<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>
In ProfileForm.js (Child component)
<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>
Note - my user is loaded via my getCurrentUser() method... Can someone help?
Thanks in advance!
To pass data via props, you have to 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
}
}
这篇关于在 vue.js 中将数据从父组件传递到子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
