vue3 defineModel双向绑定

vue3 defineModel双向绑定

在3.4以前，我们要是实现父子组件的数据双向绑定，可能会用到defineEmits的update:data这个方法，当子组件数据发生变化就手动更新下数据

我的业务场景

有三个组件，分别是顶层组件、父组件、孙子组件，其中孙子组件是个表单配置，需要在孙子组件的表单数据发生变化后及时更新到父组件中，然后父组件把接收到的数据再传递给顶层组件

实现方式

孙子组件filter-config

<n-form ref="formRef" :model="formData" :show-label="false">
... 各种各样的表单
</n-form>

const formData = defineModel('modelData');

父组件

<filter-config ref="filterRef" v-model:modelData="modelData" />

const modelData = ref({})
// 把数据暴露给顶层组件
const getForm = () => {
  return new Promise(resolve => {
    filterRef.value?.formValid(validRes => {
      resolve({ validRes, formsData: modelData.value });
    });
  });
};
defineExpose({ getForm });

顶层组件

<FilterMain ref="filterRef" />
const filterRef = ref(null);
// 获取父组件暴露的数据
filterRef.value.getForm()