父组件传对象给子组件，子组件打印不出这个对象携带的属性值

问题

vue中，为什么父组件传给子组件一个对象，子组件接收并且在mounted()周期中可以直接打印出这个对象，但是打印不出这个对象携带的属性值

举例子,父组件把projectPObj对象传给子组件：

子组件进行接收：

    props: {
        chartsData: {
            type: Object,
            default() {
                return {}
            }
        },
    },
    

注意：此时在子组件的中已经可以把对象、对象里的属性在页面上渲染出来。但是，如果该对象的属性需要在methods的函数中进一步处理，你就会发现打印不出对象里的属性值：

   mounted() {
        this.getData();
    },
    methods: {
        getData() {
            console.log("打印传过来的对象", this.chartsData)
            console.log("打印对象的属性值", this.chartsData.totalAmount)
            // 对象属性需要进一步处理
        },
    },

浏览器打印：

原因：在Vue中，父组件传递给子组件的属性是响应式的。当子组件接收到这些属性时，在mounted()生命周期钩子中打印出对象时，只会显示对象的基本结构，没有具体的属性值。这是因为在mounted()生命周期钩子期间，Vue尚未完成响应式数据的挂载和渲染过程，子组件所接收的属性仅包含初始值，而不是实际的响应式数据。

解决办法

要访问对象携带的属性值，请在模板或computed属性中使用该对象，或在watcher属性中侦听它的变化。比如watch监听：

  watch: {
        chartsData: {
            handler(newVal, oldVal) {
                // 调用函数
                this.$nextTick(() => {
                    this.getData()
                })
            },
            immediate: true,
            deep: true,
        },
    },
   mounted() {
        //this.getData();
    },
    methods: {
        getData() {
            console.log("打印传过来的对象", this.chartsData)
            console.log("打印对象的属性值", this.chartsData.totalAmount)
            // 对象属性需要进一步处理
        },
    },

浏览器打印：

请注意，在watcher对象中，我们使用了deep选项以深度监听person.hobbies数组的变化。这意味着如果hobbies数组中的任何元素发生改变，则会触发回调函数。如果不需要监听数组元素的更改，可以省略deep选项

可以看出，能够得到了对象的属性值，如果该属性值需要进一步处理，再使用到echarts图表数据中，请记得使用 this.$nextTick(() => { })以确保组件的DOM已完全渲染。

注意：

如果使用Vue 3.x，则默认情况下props不再是响应式的，因此无法侦听到对象属性的变化。如果需要侦听属性的变化，请将对象转换为ref或reactive对象。