Mounted in child component executes before parent component created 问题

Question

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

我正在将 props 从父组件发送到子组件，我想在子组件的挂载中使用这些 props，但我没有在 mounted 中获取这些 props，因为它们是在父组件中创建之前执行的。请帮我解决这个问题，以便子组件将 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>

Answer 1

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

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

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

Answer 2

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

选项 1： parent 可以 conditionally render child 组件基于 user，这样组件的 user 属性在挂载时会有一个值：

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

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

选项 2： child 可以在 user 上使用 watcher 更新userCopy:

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

注意使用spread operator浅拷贝user。

Answer 3

我所做的是在我的数据中有一个 loaded 值。然后在依赖该数据的那个子组件上，我将抛出一个 v-if="loaded".

data() {
  return {
    loaded: false
  }
},
async created() {
  try {
    await this.fetchUsers();
    // loaded will be set after the users have been fetched.
    this.loaded = true;
  }
  catch(error) {
    console.error('Failed to grab the users', error)
  }
}

然后在你的模板中做...

<child-component v-if="loaded" />

Mounted in child component executes before parent component created 问题

Mounted in child component executes before parent component created issue

javascript

components

vue.js