在父组件创建问题之前安装在子组件中执行

Question

我正在开发 vue 应用程序。我在这里面临的问题是，安装的子组件是在创建父子组件之前执行的。

我正在从父组件向子组件发送道具，并且我想在子组件的已安装组件中使用这些道具，但我没有在已安装的组件中获取这些道具，因为它们是在父组件中创建之前执行的。请帮我解决这个问题，以便子组件将 this.userCopy 设置为 this.user ，它将作为 prop 出现。

父组件

<template>
 <div>
  <Info :user="user" />
 </div>
</template>
<script>
 import Info from 'views/info';
 export default {
  components: {
    Info
  },
  data () {
    return {
      user: {
        first_name: '',
        last_name: '',

      },
      errors:[]
    }
  }
  created() {
    this.fetchUsers();
  },
  methods: {
   fetchUsers() {
      this.$axios.get('/user.json')
      .then(response => {
          this.user = response.data;
          

      }).catch(error => {
        this.errors = error.response.data.error;
      });
    },
  }
 }
 </script>

子组件

<template>
 <div>
  {{userCopy}}
 </div>
</template>
<script>
 export default {
  props: ['user'],
  data () {
    return {
      userCopy: {}
    }
  }
  mounted: function() {
   var that = this;
   this.userCopy = this.user
  }
 }
</script>

Answer 1

由于user在组件安装后异步更新，user因此将是挂钩中的初始值（未定义）mounted()。

选项 1：父组件可以根据条件渲染user子组件，以便组件的userprop 在安装时具有值：

<Info v-if="user" :user="user">

export default {
  data() {
    return {
      user: null, // updated asynchronously in fetchUsers()
    }
  }
}

选项 2：孩子可以使用观察者来user更新userCopy：

export default {
  //...
  watch: {
    user(user) {
      this.userCopy = { ...user } // shallow copy
    }
  }
}

请注意使用展开运算符进行浅复制user。