在父组件创建问题之前安装在子组件中答案

【问题标题】：Mounted in child component executes before parent component created issue在父组件创建问题之前安装在子组件中
【发布时间】：2021-07-03 20:51:52
【问题描述】：

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

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

父组件

<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>

【问题讨论】：

标签： javascript vue.js components

【解决方案1】：

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

选项 1： 父组件可以在 user 的基础上 conditionally render 子组件，这样组件的 user 属性在挂载时就会有一个值：

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

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

选项 2： 孩子可以在 user 上使用 watcher 来更新 userCopy：

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

注意使用spread operator 来浅拷贝user。

【讨论】：

【解决方案2】：

实际上，您的created 在您的子组件的mounted 之前被调用。问题是 fetchUsers 是异步的（一个 Promise），需要等待。

async created() {
    await this.fetchUsers();
  },

试试这段代码，等待异步操作。

【讨论】：