Vue3.4新增的defineModel的使用

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?.();
  };