【无标题】vue3父传子的值打印不出来

<script setup lang="ts"> 
  import { defineProps, onMounted } from "vue"; 
  const props = defineProps<{ val: string[]; }>(); 
  onMounted(() => { 
    console.log(props.val);
  })
</script>。

问题：有时候打印出来有时候打印不出来 console.log(props.val); 但是页面上props.val值可以显示出来

解决：

这个问题可能是由于异步加载导致的。在onMounted钩子函数中，props可能还没有被完全初始化，所以有时候打印不出来。为了解决这个问题，可以使用watchEffect来监听props.val的变化，并在变化时打印出来。这样可以确保在props完全初始化后再进行打印操作。

下面是修改后的代码示例：

<script setup lang="ts"> 
 import { defineProps, onMounted, watchEffect } from "vue"; 
 const props = defineProps<{ val: string[]; }>(); 
 onMounted(() => { watchEffect(() => { console.log(props.val); }); }); 
</script>

通过使用watchEffect，就可以确保在props完全初始化后再进行打印操作，从而解决打印不出来的问题