vue3+ts实现父传子并监听传过来的值？

Question

这是父组件调用子组件：

这个是传的值的类型：


这个是子组件 接受父组件传过来的值：

为啥打印出来的不一样呢
我在使用console.log(props.TrafficChartDatas.in);
打印出来的是这样

请问一下如何解决，如何使用wtach监听传过来的值？

Answer 1

传过来的值你都没有接收，为什么又解构干什么

// Parent.vue 传送
<child :msg="msg"></child>
<script setup>
    import child from "./child.vue"
    import { ref, reactive } from "vue"
    const msg = ref("这是传给子组件的信息")
</script>

// Child.vue 接收
<script setup>
    import { defineProps } from "vue"
    const props = defineProps({
        msg:{
            type:String,
            default:""
        }
    })
    console.log(props) // { msg:"这是传级子组件的信息" }
</script>