【Vue】vue父子组件数据交互，为什么子组件watch方法调用多次？

Z时代
2024-01-10
分类：技术分享

题目描述

child.vue是子组件
parent.vue是父组件

父组件在一个table中循环引用子组件

父组件通过props传递属性 itemDefaultValue 给子组件，子组件watch监听父组件传递过来的属性，子组件使用一个新值itemDefaultValueCopy 深拷贝传递过来的值并和子组件v-model绑定，点击按钮触发父组件向子组件传值，watch方法被调用多次（其实是和表格有多少行数据有关）

题目来源及自己的思路

调用多次的问题奇怪之处：
当我 itemDefaultValue:[1]，这种情况下每次点击按钮，watch方法都会触发多次
当我 itemDefaultValue:this.defaultValue,watch方法没有触发（this.defaultValue是vue data对象的值）

相关代码

父组件：parent.vue

export default {
name: 'paper_index',
components: {
PopTipTransfer
},
data () {
return {
defaultValue: [1],
editInlineColumns: [
{
title: '操作',
key: 'action',
align: 'center',
fixed: 'right',
width: 200,
render: (h, params) => {
return h('div', [
h(PopTipTransfer, {
ref: 'pop',
props: {
itemDefaultValue: this.defaultValue
}
}, [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, '项目管理')
])
]);
}
}
]
}}

子组件代码 child.vue


<template>
<Cascader v-model="itemValueCopy"></Cascader>
</template>
export default {
name: 'PopTipTransfer',
props: {
itemDefaultValue: {
type: Array,
default () {
return [];
}
},
items: {
type: Array,
default () {
return [];
}
},
renderItem: {
type: Function,
default (item) {
return item.label || item.key;
}
}
},
data () {
return {
itemValueCopy: JSON.parse(JSON.stringify(this.itemDefaultValue))
};
},
watch: {
itemDefaultValue (val, oldval) {
console.log(val);
}
}}