官网解释:
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。
当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
简单理解就是mixin可以提取复用的功能,并把混入对象混入组件成为组件本身的功能
由于公司的项目中有很多列表页,每个列表页都有很多检索项,分页功能,这里把检索功能的 ”搜索“, ”刷新“按钮,和分页的方法写到mixin中,避免很多列表重复调用同样功能的函数
import { clearObj } from "@/utils";
export const mixin = {
data() {
return {
pageObj: {
pageSize: 10
},
pageTotal: 0
}
},
created () {
if (!this.pageObj.pageNum) { // 默认分页字段currentPage,页面不需再次定义
this.pageObj.currentPage = 1
}
},
computed: {
"pageObj.pageNum" () { // 分页字段为pageNum,页面需定义pageObj.pageNum
if (this.pageObj.pageNum) {
delete this.pageObj['currentPage']
}
}
},
methods: {
handleSizeChange (size) { // 每页的数据量改变
this.pageObj.pageSize = size;
if (this.pageObj.currentPage) {
this.pageObj.currentPage = 1;
}
if (this.pageObj.pageNum) {
delete this.pageObj['currentPage'] // 这步操作为了避免分页字段为”pageNum“时,同时存在”currentPage“,可以让后端把所有分页字段固定为”currentPage“,就不需要这步了。
this.pageObj.pageNum = 1;
}
this.getList() // 重新获取列表数据
},
handleCurrentChange (page) { // 当前页码改变
if (this.pageObj.currentPage) {
this.pageObj.currentPage = page;
}
if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时,同时存在”currentPage“,可以让后端把所有分页字段固定为”currentPage“,就不需要这步了。
delete this.pageObj['currentPage']
this.pageObj.pageNum = page;
}
this.getList()
},
handleRefresh() { // 清空检索项并请求列表数据
if (this.pageObj.currentPage) {
this.pageObj.currentPage = 1;
}
if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时,同时存在”currentPage“,可以让后端把所有分页字段固定为”currentPage“,就不需要这步了。
delete this.pageObj['currentPage']
this.pageObj.pageNum = 1;
}
this.pageObj.pageSize = 10;
clearObj(this.formSearch);
this.getList();
},
handleSearch() { // 搜索数据
if (this.pageObj.currentPage) {
this.pageObj.currentPage = 1;
}
if (this.pageObj.pageNum) { // 这步操作为了避免分页字段为”pageNum“时,同时存在”currentPage“,可以让后端把所有分页字段固定为”currentPage“,就不需要这步了。
delete this.pageObj['currentPage']
this.pageObj.pageNum = 1;
}
this.getList();
},
}
}