如何让Vue子组件正确等待父组件异步传递的Props

父组件通过Axios请求后端数据后传递给子组件，但子组件常因Props未加载完成就渲染，导致遍历userPermission时触发undefined错误。已尝试将逻辑放入onBeforeMount，仅临时通过setTimeout解决，需可靠方案。

现有代码 #

父组件 #

<div class="permissions">
  <p class="sub-heading-2">Permission Selection</p>
  <PermissionSelection 
    v-if="permissions"
    @permissionsData="log" 
    v-for="category in categories" 
    :key="category.id"
    :category="category" 
    :companies="companies" 
    :userPermission="permissions"
    :errors="errors"
    :company_errors="company_assignment_error"
  />
</div>

子组件 #

onBeforeMount(() => {
  watch(props, () => {
    props.userPermission.permission.forEach(permission => {
      if(props.category.category == permission.permission[0].name) {
        isCollapsed.value = true
        subcategory.value = true

        if(permission.is_reporting_to == true && permission.is_attribute == false && propsLoadCount.value == 1) {
          assign.value = 'reporting'
        } else if (permission.is_reporting_to == false && permission.is_attribute == true) {
            assign.value = 'company'

            if(!company_errors_arr.value.includes(permission.permission[0].name) && propsLoadCount.value == 1) {
              companiesAssigned.value = []

              permission.attributes.forEach(attribute => {
                 companiesAssigned.value.push(attribute.attributable_id)
              })
            }

            if(errors_arr.value.includes(permission.permission[0].name)) {
               assign.value = ''
            }
                          
            if(companiesAssigned.value.length === props.companies.length) {
               isAllChecked.value = 'true'
            }
        }
      }
    })
  }, {deep: true})
})

1. 给关键Props设置默认值 #

在子组件中为userPermission等核心Props定义默认值，避免初始状态为undefined导致遍历报错：

defineProps({
  userPermission: {
    type: Object,
    default: () => ({ permission: [] }) // 默认空数组，确保forEach可执行
  },
  category: {
    type: Object,
    required: true
  },
  // 其他Props按需添加校验和默认值
})

2. 在Watcher中添加数据守卫判断 #

在遍历逻辑执行前，先校验所有依赖的属性是否存在，避免访问undefined的子属性：

watch(props, () => {
  // 先校验核心数据有效性
  if (!props.userPermission?.permission || !Array.isArray(props.userPermission.permission)) return
  if (!props.category?.category) return

  props.userPermission.permission.forEach(permission => {
    // 校验当前permission的必要属性
    if (!permission?.permission?.[0]?.name) return
    
    if(props.category.category == permission.permission[0].name) {
      // 原有业务逻辑...
    }
  })
}, {deep: true})

3. 优化Watcher的触发逻辑 #

移除onBeforeMount包裹，直接在组件顶层定义Watcher，同时指定监听的具体依赖，并开启immediate确保挂载后立即执行一次：

watch([() => props.userPermission, () => props.category], ([newUserPerm, newCategory]) => {
  if (!newUserPerm?.permission || !Array.isArray(newUserPerm.permission)) return
  if (!newCategory?.category) return

  newUserPerm.permission.forEach(permission => {
    if (!permission?.permission?.[0]?.name) return
    if(newCategory.category == permission.permission[0].name) {
      // 原有业务逻辑...
    }
  })
}, {deep: true, immediate: true})

4. 强化父组件的渲染条件 #

父组件的v-if可以进一步校验permissions的核心数据是否有效，确保子组件只有在数据完全就绪后才渲染：

<PermissionSelection 
  v-if="permissions?.permission && permissions.permission.length > 0"
  <!-- 其他属性保持不变 -->
/>

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