问题
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对象。