父子组件使用双向数据绑定 vue3.x + Ts + ant vue

       本文对双向数据绑定的原理并不深究，直接展示怎样使用，话不多说，开始！！

        在vue2中，常用的父子间双向数据绑定为sync（虽然我没有用过，哈哈），但在vue3中就可以直接使用v-model，如下：

        第一步：在父组件中的子组件标签上，v-model后面跟上传递过去的变量名（注意：我传递的是一个ref包装的响应式对象）

<FishingModal v-model:pageData="newPageData" />

        第二步：在子组件中，通过 defineProps() 接收父组件传递过来的变量名（这里的BAPI.UpdateFishing 是我用ts做的类型限制），再通过definedEmits（）绑定更新事件

const props = defineProps<{ pageData: BAPI.UpdateFishing }>();
defineEmits(['update:pageData']);

        第四步：因为vue默认不允许更改props的值，所以我们再赋值给一个变量，避免报错。这样的话，基本就已经大功告成了，

const pageData = ref(props.pageData);

        第五步：如果子组件中没有通过js手动更改 pageData 的操作时，而是只是单纯的读取的话，就可以这样

<a-input v-model:value="pageData.webpage_name" placeholder="测试钓鱼页面" />

        同样也通过v-model进行绑定，就可以在子组件中对父组件的数据进行修改了，实现双向数据绑定。

        好了，那到这里就结束啦。