通用vue搜索组件里面的重置和搜索按钮功能实现

一、动态绑定对象值

1.一开始是给搜索组件page-search双向绑定一个formData,但是里面的键值是写死的，为了能够复用以及动态绑定，可以给formData动态匹配键值

 二、按钮重置功能

1.给重置按钮一个点击事件

2.在重置按钮里面遍历拿到formOriginData键值对里面key值，然后把这个值赋值给formData对应的键值对，由于一开始formData的值是由prop.modelValue拷贝过来的，如果在这里直接把formOriginData赋值给formData,这样只是浅拷贝，没办法深度改变绑定的formData对应的键值对，所以需要采用下列这种办法实现重置

三、搜索按钮功能实现 

1.先给搜索按钮一个点击事件

2.然后把搜索的内容通过emit发送给父组件去触发

 

3.父组件接收queryBtnClick事件

 4.父组件里面去进行调用发送请求进行查询的函数

 

 

 4.可以选择将导出的重置事件和搜索事件这些单独写在一个文件page-search.ts,然后再在page-content文件里面去引用这个page-search