Vue.js问题：mounted钩子中无法访问props

问题本质 #

你的代码语法上没有错误，出现这种情况的核心原因是父组件传递的singleRow是异步加载的数据：

• 子组件mounted钩子执行时，父组件的singleRow还未完成加载，此时子组件接收的row props自然是undefined；
• 而Vue模板是响应式的，当singleRow异步加载完成后，props会自动更新，模板随之重新渲染，所以能正常展示数据。

解决办法 #

1. 监听props变化（最可靠）

通过watch监听row的变化，确保在数据准备好后再执行逻辑：

// sidebarProductDetails.vue
watch: {
  row(newRow) {
    if (newRow) {
      console.log(newRow);
      // 这里放置需要依赖row数据的业务逻辑
    }
  }
}

如果需要在组件初始化时就触发一次监听逻辑，可添加immediate: true选项：

watch: {
  row: {
    handler(newRow) {
      if (newRow) {
        console.log(newRow);
      }
    },
    immediate: true
  }
}

2. 使用$nextTick延迟执行

利用this.$nextTick()等待DOM更新完成后再获取props，适用于数据在mounted后短时间内更新的场景：

// sidebarProductDetails.vue
mounted() {
  this.$nextTick(() => {
    console.log(this.row);
  });
}

3. 给父组件数据设置初始值

在父组件中给singleRow设置与实际数据结构匹配的初始值，避免子组件接收的props为undefined：

// allImport.vue
data() {
  return {
    singleRow: {} // 或根据实际数据结构初始化，比如{ id: '', name: '' }
  }
}

内容的提问来源于stack exchange，提问作者Shibbir