vue2/3 父组件给子组件传值显示null

前言

当我使用父子组件给子组件传值时，发现传过来的值使用log打印出来的竟是null，我以为是值根本没有传过来，当我在父组件中log传过来的值的时候发现，确实是有值，那问题出现在什么地方了呢

问题原因

经过我不断测试打印值，原来是异步加载的问题：如果父组件传递的数据是通过异步请求获取的，那么在初始阶段可能会打印出null。这是因为异步请求需要一定的时间来完成，而在此期间子组件可能已经开始渲染。渲染完成时打印值就是null，而此时异步请求的数据才获取到，而子组件却已经渲染完成，值才传过来。

解决方法

可以在子组件中通过watch或computed属性来监听父组件传递的数据，确保在数据更新后再进行相关操作。

代码

父组件

<template>
    <sun :data="data"></sun>
</template>
<scrip setup>
    improt {onMounted,ref} from  'vue'
    // 子组件
    import sun from './components/footer/sun.vue';
    // 接口
    import {getList} from '@/store/modules/document.js';
    
    const tableData = ref()
    const list = {
        id:1,
        alis:'中国'
    }
    onMounted(() => {
        getTableData(list).then(res => {
        tableData.value = res.data.list;
        console.log(tableData.value)  // 有值，正常输出
    });
});
</scrip>

子组件

<template>
    <div></div>
</template>
<scrip setup>
    import {onMounted} from 'vue'
    const props = defineProps({
      data: {
        type: Array,
        required: true
      }
    });
    
    // 监听
    watch(()=>props.data,()=>{
        console.log(props.data)  // 成功打印
    })
</scrip>    

结语

当父组件给子组件穿过来的值打印是null，但是确实有值传过来，可以使用watch监听，当数据变化时，在把需要的值接受到变量中，这样就解决了传来的值是null的问题

欢迎大家留言，一起讨论，也可以私信看到会回复