親から子コンポーネントにデータを渡そうとしています。ただし、渡そうとしているデータは、子コンポーネントで空白として印刷され続けます。私のコード:
_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()
メソッドを介してロードされます...誰か助けてもらえますか?
前もって感謝します!
小道具を介してデータを渡すには、 子コンポーネントでそれらを宣言する する必要があります。
module.exports = {
props: ['user'],
created: function () {
console.log('user data from parent component:')
console.log(this.user) //prints out an empty string
}
}
次の点に注意してください:
親コンポーネント...
<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>