vue父子组件监听watch动态传值

应用场景：
一个编辑功能，子组件需要动态监听表单中输入的值进行条件判断将值传给父组件，父组件接受子组件的值并返回给子组件进行赋值（编辑功能的数据回显）

在此次功能中，我将子组件的编辑赋值操作放到了mounted中，然而watch中的formData监听则失效了，若放到created中，则会一切正常。

父组件中：

<template>
	<div>
		<el-button
            type="primary"
            :disabled="isSubmit"
            @click="passes(submitEvent)"
            >提交申请</el-button
          >
		<child @childEvent="childEvent" :childFrom="childFrom"></child>
	</div>
</template>
<script>
	data() {
		isSubmit: true,	// 子组件中未输入数据则禁用提交按钮，否则开启按钮权限
		childFrom: {}	// 子组件中输入的表单数据
	},
	mounted() {
		getData();
	},
	methods:{
		childEvent(value, isShow){
			// 获取到子组件传来的数据
			this.childFrom= value;
			if (isShow) {
		        this.isSubmit = false;
		    } else {
		        this.isSubmit = true;
		    }
		},
		getData(){
			// 调用后端接口获取数据（编辑数据回显）
			api.getDataInterface().then(res => {
				if(res) {
					// 获取到的数据传给子组件以便展示
					this.childFrom = res;
				}
			});
		}
	}
</script>

子组件中：

<template>
	<div>
		<el-form label-position="left">
	        <el-select
	          require="true"
	          rules="selected"
	          label="第一空"
	          v-model="formData.salesAmount"
	          placeholder="请选择"
	        >
	          <el-option
	            :label="item.label"
	            :value="item.value"
	            v-for="(item, index) in formDataSelect.salesAmountSelect"
	            :key="index"
	          ></el-option>
	        </el-select>
	        <el-select
	          require="true"
	          rules="selected"
	          label="第二空"
	          v-model="formData.salespersonNumber"
	          placeholder=" 请选择"
	        >
	          <el-option
	            :label="item.label"
	            :value="item.value"
	            v-for="(item, index) in formDataSelect.salespersonNumberSelect"
	            :key="index"
	          ></el-option>
	        </el-select>
	        <el-checkbox
	          require="true"
	          rules="checked"
	          v-model="formData.partnerType"
	          label="第三空"
	        >
	          <el-checkbox label="选一"></el-checkbox><br />
	          <el-checkbox label="选二"></el-checkbox><br />
	          <el-checkbox label="选三"></el-checkbox>
	        </el-checkbox>
	    </el-form>
	</div>
</template>
<script>
	props: ["childFrom"],
	data() {
		formData: {},
		formDataSelect: {
	        salesAmountSelect: [],
	        salespersonNumberSelect: []
	    },
	},
	created() {
		// 页面加载，获取到父组件传来的值并赋给表单（编辑数据回显）
		// 必须要放到created中执行赋值，若放到mounted中执行，则子组件中的formData监听则会失效
	    this.formData = this.childFrom;
	},
	watch: {
		// 监听childFrom（父组件传来的数据），并赋值给子组件的表单中
		childFrom: {
	      handler(val) {
	        this.formData = this.childFrom;
	      }
	    },
	    // 监听formData，将子组件数据传给父组件
	    formData: {
	      handler(val, oldVal) {
	        let isShow = false;
	        // 判断 若表单中的数据有一项为空 则父组件中的提交按钮则为禁用状态
	        if (
	            val.salesAmount &&
	            val.salespersonNumber &&
	            val.partnerType &&
	            val.partnerType.length
	         ) {
	            isShow = true;
	         } else {
	            isShow = false;
	         }
	        this.$emit("currentSubmitValue", val, isShow);
	      },
	      immediate: true,
	      deep: true
	    }
	},
</script>

总结：
1、父组件用props给子组件传值
2、子组件使用watch监听formData加$emit的方式给父组件进行传值
3、同时也需要在子组件中监听props的childFrom，给子组件的表单进行赋值

实际上是要监听两个参数:
一个是父组件传入的，改变子组件内部的值（用于赋值）
另一个是子组件中的`formData`，变化后触发事件执行父组件数据变化（用于触发事件）