Vue中为什么有时候获取不到props？

原因

在Vue中，props是从父组件流向子组件，在子组件的mounted及之前的生命周期钩子中，子组件只能接收到父组件的第一次props，如果父组件的props改变了，那么子组件在以上这些生命周期钩子中是接收不到的，那么最好的解决办法当然就是在子组件中采用watch来侦听peops的变化。

如下有一个案例是我在实际开发中遇到的，记录下来以防再次踩坑

案例

子组件A：

子组件是elementUI中的tree组件，首先通过向后端获取数据来得到tree的数据，然后拿到父组件传递过来的props进行勾选状态回显

const { state } = useAsyncState(
  () => getAllMenuTree(),
  { data: [] },
  {
    onSuccess(res) {
      if (res) {
       
       //子组件通过useAsyncState来获取树形数据
       console.log('props.checkedKeys',props.checkedKeys);
       //然后拿到父组件传递过来的props，进行setCheckedKeys
        treeRef.value?.setCheckedKeys(finalKeys);
      }
    },
  },
);

父组件B：

父组件B也使用useAsyncState方法获取数据，然后把数据中需要回显的数据传递给子组件A，
此时props发生了变化

<template>
 
      <FilterOrCheck  :checkedKeys="checkedKeys" 
</template>
const checkedKeys = ref<string[]>([]);
const { state, execute } = useAsyncState(
  () => getAuthDetail(paramsQuery.value),
  {
    data: {},
  },
  {
       onSuccess(res) {
      if (res.code === ResDataCodeEnum.SUCC_0) {
     
        checkedKeys.value = res.data.menuIds || [];

      }
    },
  },
);

父组件C：

父组件C和B一样，也是同样的操作

<template>
      <FilterOrCheck  :checkedKeys="checkedKeys" 
</template>
const checkedKeys = ref<string[]>([]);
const { state } = useAsyncState(
  () => getPosDetail(postId.value),
  { data: {} },
  {
    onSuccess(res) {

      checkedKeys.value = res.data.menuIds || [];

      
    },
  },
);

这个案例的结果是在父组件B使用子组件A时，子组件A打印出来的props.checkedKeys是有值的，但是父组件C使用子组件A的时候，子组件打印出来的是一个空数组，这是为何？

原因是因为父组件B和C他们都是在获取数据之后才改变props的，而A组件也是在获取数据之后才打印props的，如果A组件获取数据的时间比较长，那么在A组件获取到数据的时候，父组件已经获取到数据并传递props给A了，所以A打印出来的props是有的，反之就是没有的，所以解决办法就是为了以防万一，再加上一个watch即可

Vue中为什么有时候获取不到props？

原因

案例

猜你喜欢