通用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
更多推荐
已为社区贡献4条内容
所有评论(0)