[vue]mixins在项目中的应用
权威指南
参考官网链接:https://cn.vuejs.org/v2/guide/mixins.html
更多场景学习:https://zhuanlan.zhihu.com/p/27547999
使用场景
当有多个页面重复调用同一个方法或者同一个变量时,使用mixins可以避免每个*.vue文件中都重写一次这个方法
>需要注意:谨慎使用 global mixin,局部的随意使用
使用举例
在一个管理系统中,会有很多列表页都有分页组件(以element-ui组件为例),这部分代码重复性很高。分页组件的方法和变量完全可以剥离出来,独立于每个页面管理。
//*.vue页面代码
<template>
....省略其它内容...
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-sizes="pagination.pageSizes"
:page-size="pagination.pageSize"
layout="total,sizes, prev, pager, next, jumper"
:total="pagination.totalCounts">
</el-pagination>
....省略其它内容...
</template>
<script>
import QueryTable from '@/mixins/queryTable'
export default {
mixins: [QueryTable('queryList', 'queryForm', 'tableDatas')],
data() {
rerturn {
tableDatas: [
tableData: [],
tableHead: []
]
...省略其它内容...
}
},
methods:{
queryList(formName, pageIndex) {
this.$refs[formName].validate((valid) => {
if(valid) {
...省略其它内容...
} else {
return
}
})
}
}
}
</script>
//mixins/queryTable.js
export default function(queryName, formName, tableObjName) {
return {
data() {
return {
pagination: {
currentPage: 1,
pageSizes: [10, 20, 30],
pageSize: 10,
totalCounts: 0
}
}
},
methods: {
resetTable() {
this[tableObjName].tableData = []
this.pagination.totalCounts = 0
this.pagination.pageSize = 10
this.pagination.currentPage = 1
},
handleSizeChange(val) {
// 切换每页显示条数
this.pagination.pageSize = val
this.pagination.currentPage = 1
if (this[tableObjName].tableData && this[tableObjName].tableData.length > 0) {
this[queryName](formName, 1)
} else {
this.resetTable()
}
},
handleCurrentChange(val) {
// 切换页数
this.pagination.currentPage = val
if (this[tableObjName].tableData && this[tableObjName].tableData.length > 0) {
this[queryName](formName, val)
} else {
this.resetTable()
}
}
}
}
}
坚持,坚持,坚持。再坚持坚持!