vue3,onMounted中获取不到props中的值

文章讨论了当父组件在子组件挂载后更新props时可能导致的问题,如子组件接收到初始值或空值。提供了解决方案,包括检查组件间参数传递和推荐使用watch监听并处理id变化以确保及时获取最新值。
摘要由CSDN通过智能技术生成

问题分析

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

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

解决方法

1.父子组件同步问题,检查父子组件中传递参数的命名、语法
2.传递时机,推荐在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);
  }
);
引用\[1\]提到,在Vue 3,可以使用`onMounted`钩子函数来在组件挂载后执行一些操作。然而,在引用\[1\]的代码示例,`onMounted`钩子函数无法获取到`ref`的。这是因为在`onMounted`钩子函数执行时,组件的`setup`函数还没有完成,`ref`还没有被赋。要解决这个问题,可以将`onMounted`钩子函数放在`setup`函数的返回对象,确保在`ref`被赋后再执行。修改后的代码如下所示: ```javascript export default { props: \['src'\], setup(props, context) { const V1 = ref(null); return { props, V1, onMounted(() => { console.log(V1.value); }) }; } } ``` 引用\[2\]的代码示例也存在类似的问题,`onMounted`钩子函数无法获取到`lhDra`的。同样地,可以将`onMounted`钩子函数放在`setup`函数的返回对象,确保在`ref`被赋后再执行。 ```javascript export default { setup() { const lhDra = ref(null); return { lhDra, onMounted(() => { console.log(lhDra.value, 'ref-data'); }) }; } } ``` 引用\[3\]的代码示例也存在类似的问题,`onMounted`钩子函数无法获取到`V1`的。同样地,可以将`onMounted`钩子函数放在`setup`函数的返回对象,确保在`ref`被赋后再执行。 ```javascript export default { props: \['src'\], setup(props, context) { const V1 = ref(null); console.log('节点', V1.value); return { props, V1, }; } } ``` 通过将`onMounted`钩子函数放在`setup`函数的返回对象,可以确保在`ref`被赋后再执行相应的操作,从而解决了无法获取`ref`的问题。 #### 引用[.reference_title] - *1* *3* [Vue3--ref使用(解决ref无法获取dom元素的问题)](https://blog.csdn.net/web15285868498/article/details/123304089)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [记录vue3子组件ref读取不到问题](https://blog.csdn.net/weixin_47436633/article/details/125979628)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值