vue3 await等待接口数据传递给子组件使用

缘起: 后端传递的数据,接口调用函数吧相关数据return出来, 需要在组件中await等待,并用变量接受, 现有一功能需要将接收到的数据传递给子组件使用, 但是子组件接受到的值为undefined. 上网找了半天才找到原因及解决办法, 在此记录.

• 原因: 子组件加载时传递数据没有接受完成, 导致数据为undefined
• 解决思路: 父组件正常传递值, 但是在子组件中props接收到数据后需要对其进行解构赋值, 如果要将其渲染到页面还要通过watch去对数据进行监听操作.
• 示例代码如下

// 父组件 const data = await getCourseDetailByCoursePlanId(id); getChildrenData.value = data.data.data?.coursePlan; // 子组件 const props = defineProps<{ getChildrenData: CourseRewrite; //接收父组件ParentComponent传过来的数组 }>(); //解构赋值 const { getChildrenData } = toRefs(props); watch( () => getChildrenData.value, () => { courseIntroductionOne.value = getChildrenData.value.course.intro; courseObjective.value = getChildrenData.value.course.goal as string; }, { deep: true }, );