通用vue搜索组件里面的重置和搜索按钮功能实现
通用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


更多推荐



所有评论(0)