TS_144636的博客

摘要：本文介绍了一个基于Vue3和vxe-table开发的双表格数据转移组件。该组件支持本地/远程数据加载，提供分页、搜索、全选等功能，具有高度可定制性。文档详细说明了组件API、运行环境（Windows10+Chrome+Node20），并展示了基础使用、远程加载、自定义表格列和表单集成四种典型应用场景。通过插槽机制可自定义表格列，组件能灵活集成到各类表单场景中，支持完善的数据变更和事件通知机制。

本文介绍了一个基于Vue3和ElementPlus开发的日期范围计算Hook——useDateRange.js。该工具支持灵活配置基准日期、获取月份数量和是否包含当前月，提供6种内置日期格式并支持动态添加。采用响应式设计自动更新计算结果，具备健壮的无效日期处理能力，适用于报表系统、日历组件等场景。文章详细展示了基础使用、自定义配置、动态更新和组件集成四种典型用法，通过配置对象和API方法实现高度定制化的日期范围计算功能。该Hook能显著简化前端日期处理逻辑，提升开发效率。

目前要实现这样一个功能，修改了form表单数据后，检测form表单数据修改前，修改后的变化，记录下来，传递给后端，后端偷懒让前端来做，花了一天时间，缝缝补补优化后，没有什么问题，记录一下。运行终端：Goodle Chrome(谷歌) 浏览器。开发框架：vue3 + elementPlus。开发环境：nodeJS v20.17.0。运行系统：windows 10。nvm 版本：1.1.12。

创建子组件 water-fall.vue ,defineProps接收父组件传递过来的参数。defineExpose 子组件给父组件暴漏一个属性或者方法。父组件读取子组件数据，子组件给父组件暴漏一个属性或者方法。defineProps 接收父组件传递过来的数据。defineEmits 给父组件传值。子组件给父组件暴漏一个属性或者方法。父组件接收来自子组件传递的数据。例1：子组件给父组件传值。例2：子组件给父组件传值。父组件向子组件传递数据。

子组件 water-fall.vue。

beforeCreate created setup语法糖模式是没有这两个生命周期的 setup 去代替。onRenderTracked 调式。·获取的是更新之前的dom;获取的是更新之前的dom;

【代码】vue3:使用插件递归组件。

停止监听：赋值给一个变量，watchEffect会返回一个函数，变量作为函数调用会停止监听。flush：pre 组件更新之前调用， sync 同步执行， post 组件更新之后执行。可以传递一个参数作为回调函数，在数据发生变化之前做一些操作。watchEffect 是非惰性的，一进入页面会自动调。onTrigger:数据发生变化后断点调试。flush 执行时机，可选参数如下。

【代码】vue3:watch。

【代码】vue3: ref, reactive, readonly, shallowReactive。

【代码】vue3： toRef, reactive, toRefs, toRaw。

vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的朋友可以用 proxy 进行替代。1、在 main.js 通过两种方法注入全局函数 asyncDate ，分别利用了 app.config.globalProperties 和 provide。-------------------------正文开始---------------------

原文关注公众号，后台里留言可进行提问，可在后台留言向作者提问解答问题!