mixins 混入 用法详解

最近在开发一个页面量比较大的自动化管理系统，发现几乎每个页面都有搜索项，表格数据，以及分页，这导致很多页面都可能重复定义相同的方法和变量名，感觉很冗余，vue提供的mixins 属性可以完美的解决这个问题。

不用mixins的写法，每个页面重复定义相同变量及方法
 export default {
data(){
retrun{
pageSize:'', //每页数据量
total:"",//总数据量
tableData:"",//表格数据
searchValue:{},//搜索参数
}
}，
methods:{
    // 改变页码
    pageChange(e) {
      this.page = e - 1
      this.init()
    },
    // 改变每页显示数
    sizeChange(e) {
      this.page = 0
      this.size = e
      this.init()
    },
}
}

使用mixins  只需要将上述代码放到js文件中。做一以下操作就能达到目的，mixins可以保证变量及方法在每个中文件引入都是相互独立互不影响的。并且js每个属性下的方法和变量，都会自动混入到页面对应的方法及属性下。如果mixins对象中有组件中的同名属性或方法，那么组件中的属性或方法优先级更高。

import mixinsObj  from '....'
export default {
mixins:[mixinsObj]
}

mixins优点：减少代码重复的数量

缺点：

1.如果一次引入多个mixins对象，会引起命名冲突。

2.难以追踪来源

避免过渡使用mixins

过渡使用mixins会使代码的复杂性增加，使代码难以维护和理解