问题分析
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.父子组件同步问题,检查父子组件中传递参数的命名、语法