父组件修改子组件深层数据，value是obj类型

<!-- 父组件内调用子组件 -->
<son v-for="p in data_arr" :fruits="p.fruits"></son>

// 数据保存
data_arr: [{
   
	col: 2,
	row: 4,
	fruits: {
   
		name: '苹果',
		num: 2
	}
}]

解决

监听标志位

  • force_refresh：强制刷新标志位
  • 初始值为false，当obj内参数变化将标志位同步改为true
  • 在子组件内监听标志位变化并同步更新obj

父组件修改数据

// 父组件---伪代码
data_handle() {
   
	this.data_arr = [{
   
		// ...修改数据
		fruits: {
   
			name: '梨子',
			num: 3
		},
		force_refresh: true
	}]
	// 如果数据是后台获取，需要考虑获取时间，将重新赋值的代码放在定时器setTimeout里面执行
}

// 数据保存
data_arr: [{
   
	col: 2,
	row: 4,
	force_refresh: false,
	fruits: {
   
		name: '苹果',
		num: 2
	}
}]

子组件监听变化并同步

// 子组件获取父组件传参
props: {
   
	force_refresh: {
   
          type: Boolean,
          default() {
   
              return false
          }
    }
}

watch: {
   
	fruits(n, o) {
   
	},
	force_refresh(n, o) {
   
	}
}