vue3 onMounted中获取不到props中的值

问题分析

1 传递时机：如果父组件在子组件挂载之后更新 props 的值，那么 onMounted 钩子中访问到的将是初始值（可能是undefined 或空值）。

2 父子组件同步问题：可能是父子组件的同步问题，导致 props 没有正确传递。

解决方法

1.传递时机导致的

方法一：在onMounted获取props中的值，改为watch

const props = defineProps({
  id: {
    type: String,
  },
});
const data = ref([]);
//获取数据的函数
const fetchProjectArea = async (id) => {
  const res: any = await getData({ id: id });//getData为数据库接口
  data.value = res;
};

watch(
  () => props.id, // 监听 id 的变化
  async (newid) => {
    await fetchProjectArea(newid);
  }
);

方法二 用setTimeout 延时

const props = defineProps({
  id: {
    type: String,
  },
});
const data = ref([]);
//获取数据的函数
const fetchProjectArea = async (id) => {
  const res: any = await getData({ id: id });//getData为数据库接口
  data.value = res;
};
onMounted(()=>{
  setTimeOut(()=>{
     fetchProjectArea(props.id)
  },200)
}

2.父子组件同步问题，检查父子组件中传递参数的命名、语法