Vue.js 父子组件，为啥我的 prop 在子组件中还没有？

Posted 2023-02-23

【中文标题】Vue.js 父子组件，为啥我的 prop 在子组件中还没有？

【英文标题】：Vue.js parent-child components , why my prop is not yet available in child component?Vue.js 父子组件，为什么我的 prop 在子组件中还没有？

【发布时间】：2018-12-20 09:32:00

【问题描述】：

在父组件 Member.vue 中，我通过 getter 从 Vuex 存储中获取用户和帐户数据

<script>
import  mapGetters  from 'vuex'
import Profile from '@/components/Member/Profile.vue'
export default 
  name: 'member',
  components: 
    Profile
  ,
  data () 
    return 
    
  ,
  computed: 
    ...mapGetters(['user', 'account'])
  ,
  methods: 
  ,
  created () 
    console.log('MEMBER VUE CREATED user: ', this.user)
    console.log('MEMBER VUE CREATED account: ', this.account)
  

</script>

在子组件配置文件中，我从道具中获取用户数据，但它是未定义的......

<script>
export default 
  name: 'profile',

  props: ['user'],
  computed: 
    ...
  ,
  methods: 
    ...
  ,
  created: function () 
    console.log('user data from parent component:')
    console.log('user: ', this.user)
  

</script>

我猜它与父子生命周期挂钩...但我实际上并没有看到如何轻松解决它...感谢您的反馈

【问题讨论】：

可以分享一下html代码吗？那就是您将财产传递给孩子的地方，在您的情况下，它类似于<profile :user="user" ...></profile>

是的，很简单：。我想我忘了传递其中的属性 LOL 。将其设置为 asnwer ... 我会投票给它

【参考方案1】：

在您的 HTML 中，您需要将属性传递给子级，在您的情况下，它可能类似于：

<profile :user="user" ...></profile>