Vue混入mixins，让你减少一半代码

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

实例

web 应用免不了要和表格打交道，特别是管理类或者后台类的应用。

多个组件可能都包含有表格组件，但是逻辑基本都一样，比如表格分页、分页数量调整等等操作，这个时候就适用混入来实现。

使用

技术栈使用 Vue 项目 + elementUI

在 src 目录下新建 mixins 目录，统一管理混入 js。

然后在该目录下新建 pageMixin.js

pageMixin.js

export const pageMixin = {   data() {     return {       url: '',       queryData: {         currPage: 1,         pageSize: 10       },       tableData: {         rows: [],         total: 0       },       loading: false, // 加载列表数据的Loading       pageSizes: [10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数       layout: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能     }   },   methods: {     // 查询列表数据     getList() {       this.$axios.get(this.url, {         params: this.queryData       }).then(res => {         this.tableData = res.data;       });     },     // 修改当前页     handleCurrentChange(currPage) {       this.queryData.currPage = currPage;       this.getList();     },     // 修改每页行数     handleSizeChange(pageSize) {       this.queryData.currPage = 1;       this.queryData.pageSize = pageSize;       this.getList();     },   }, }  

组件引入

<template>   <div>     <el-table :data="tableData.rows">       <el-table-column prop="userID" label="ID" width="180"></el-table-column>       <el-table-column prop="account" label="账号" width="180"></el-table-column>       <el-table-column prop="password" label="密码"></el-table-column>     </el-table>      <div style="text-align:left;margin:10px">       <el-pagination         @size-change="handleSizeChange"         @current-change="handleCurrentChange"         :page-sizes="pageSizes"         :page-size="pageSizes[0]"         background         :layout="layout"         :total="tableData.total"       ></el-pagination>     </div>   </div> </template>  <script> import { pageMixin } from "@/mixins/pageMixin";  export default {   name: "HelloWorld",   mixins: [pageMixin],   data() {     return {       url: "/api/user/list"     };   },   components: {},   mounted() {     this.getList();   },   methods: {} }; </script> 

因各个组件的请求列表 api 不一致，需要对应设置接口变量。

多条件查询

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，发生冲突时以组件数据优先。

有些组件可能有多条件查询，而且各个 api 查询字段都不一样。

这时候在组件中可以设置 queryData 参数。

data() {     return {       queryData: {         title: ""       },       url: "/api/user/list"     };   }, 

这时候接口查询时会加上 title 参数。