define-model的作用
在3.3及之前的版本，父子组件之间的通讯，一直都是靠props（父传子）和emit（子传父）来实现。而define-model整合了这两种方法，只需要在父组件中定义define-model的方法，子组件中进行声明，参数可以是一个变量，也可以是一个函数（响应式的）。一旦该变量发生改变，父子组件拿到的都是最新值，这就是define-model的作用。
使用情况
上文也讲过，对于props和emit联合起来的情况都可以使用，但是正常情况下对于普通变量，还是用props与emit更加熟练。且define-model对于嵌套的比较深的变量，踩坑的方式有很多种。
但是对于函数类型的变量，使用define-model会比较方便。
使用实例
需求：
由于数据结构的问题，单独把表单给封装了。（当事人表示非常后悔）这就是本实例的环境。遇到的问题是，父组件的modal点击确定的时候，需要调用子组件的校验表单方法。并且如果有问题需要抓取，没问题才能点击确定之后在父组件中发起修改（添加）数据的请求。这里的组件库是ant。
这里抛出一种情况。比如父组件需要在某时刻调用子组件的一些方法。我们可以先在父组件中定义一个响应式变量，用来定义一个函数。
const rulesVerify = ref();
然后再通过define-model的方式传给子组件：
<set-proportion
ref="child"
v-model:rulesVerify="rulesVerify"
></set-proportion>
子组件内部需要声明这个变量，接受类型是函数类型。
const rulesVerify = defineModel('rulesVerify', {
type: Function as PropType<() => Promise<void>>,
});
const verifyForm = async () => {
const res = await formRef.value.validateFields();
return res;
};
rulesVerify.value = verifyForm;
父组件调用：
// 添加
const handleUpdate = async () => {
await rulesVerify.value().then((data) => {
console.log(data);
});
await DimocraticApi.saveOrUpdatePlanInfo(updateForm.value);
addModal.value = false;
refreshTableData.value?.();
};
