Vue3组合式API异步Props传递问题求助

父组件端优化：确保数据就绪后再渲染子组件 #

父组件里getGroup是异步请求，初始group.value是空对象，直接传给子组件会导致子组件拿到初始空值。可以通过条件渲染，等请求完成、group有有效数据后再渲染子组件：

<!-- 父组件模板 -->
<ChildComponent v-if="Object.keys(group.value).length" :group="group.value" />
<!-- 或者更严谨的判断，比如检查核心字段是否存在 -->
<ChildComponent v-if="group.value.id" :group="group.value" />

也可以添加加载状态提升用户体验：

const group = ref({});
const isLoading = ref(true);

getGroup(group_id).then((g) => {
  group.value = g;
  isLoading.value = false;
}).catch(() => {
  isLoading.value = false;
  // 这里可添加错误提示逻辑
});

模板中对应处理加载状态：

<div v-if="isLoading">加载中...</div>
<ChildComponent v-else :group="group.value" />

子组件端处理：监听Props变化执行后续逻辑 #

如果必须提前渲染子组件，可通过watch监听group的变化，当数据就绪后再执行业务逻辑：

// 子组件脚本
const props = defineProps({
  group: {
    type: Object,
    default: {},
  },
});

// 监听group变化，数据就绪时执行逻辑
watch(
  () => props.group,
  (newGroup) => {
    // 过滤初始空对象的情况
    if (Object.keys(newGroup).length) {
      // 这里写异步完成后需要执行的代码
      console.log('group数据已就绪:', newGroup);
      // 比如初始化表单、调用业务方法等
    }
  },
  { immediate: true } // 可选：组件挂载时立即执行一次判断
);

也可以用computed包装出有效的group对象，避免直接使用可能为空的Props：

const validGroup = computed(() => {
  return Object.keys(props.group).length ? props.group : null;
});

// 后续逻辑中使用validGroup即可

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