时间戳

首页 > 解决方案 > 通过 props 将数据从父组件传递到子组件时，数据在子组件的挂载钩子中似乎未定义

vue.js - 通过 props 将数据从父组件传递到子组件时，数据在子组件的挂载钩子中似乎未定义

问题描述

在我的父组件中：

<UsersList :current-room="current_room" />

在子组件中：

export default {
    props: {
        currentRoom: Object
    },
    data () {
        return {
            users: []
        }
    },
    mounted () {
        this.$nextTick( async () => {
            console.log(this.currentRoom) // this, weirdly, has the data I expect, and id is set to 1
            let url = `${process.env.VUE_APP_API_URL}/chat_room/${this.currentRoom.id}/users`
            console.log(url) // the result: /api/chat_room/undefined/users
            let response = await this.axios.get(url)
            this.users = response.data
        })
    },
}

当我使用 vue-devtools 查看页面时，可以看到数据出现：

在此处输入图像描述

标签： vue.js

解决方案

我过去遇到过这个问题——和其他许多人一样。无论出于何种原因，您都不能依赖组件mounted处理程序中可用的道具。我认为这与在Vue 的生命周期mounted()中被调用的点有关。

我通过观察道具并将我的逻辑从mounted到watch handler解决了我的问题。在您的情况下，您可以查看该currentRoom属性，并在处理程序中进行 api 调用：

export default {
  props: {
    currentRoom: Object
  },
  data() {
    return {
      users: []
    }
  },
  watch: {
    currentRoom(room) {
      this.$nextTick(async() => {
        let url = `${process.env.VUE_APP_API_URL}/chat_room/${room.id}/users`
        let response = await this.axios.get(url)
        this.users = response.data
      })
    }
  },
}

我不认为你真的需要在$nextTick()这里使用，但我把它留给了你。您可以尝试将其删除以简化代码。

顺便说一句，向console.log(this.currentRoom);您显示房间 ID 的原因是因为当您将对象传递给 时console.log()，它会绑定到该对象，直到它被读取。因此，即使在console.log()调用时房间 ID 不可用，它也会在您在控制台中看到结果之前变为可用。

推荐阅读