码迷,mamicode.com
首页 > 其他好文 > 详细

[vue]mixins在项目中的应用

时间:2020-03-13 18:31:09      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:学习   set   global   代码重复   for   指南   多列   validate   mixin   

权威指南

参考官网链接: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()
        }
      }
    }
  }
}

[vue]mixins在项目中的应用

标签:学习   set   global   代码重复   for   指南   多列   validate   mixin   

原文地址:https://www.cnblogs.com/danker/p/12467388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!