Vue之mixins使用

/**
 *
 * 使用混入 - 把公共使用到的一些参数和方法提取出来，减少冗余，方便维护
 *
 * 特点:
 * 1.可以定义共用变量,相当于扩展了父组件的对象与方法,
 *   各个变量是相互独立的,参数和方法在各组件中不共享,值的修改在各个组件中不会相互影响
 * 2.引入mixins后组件会对其进行合并,在发生冲突时以组件数据优先(组件内的参数和方法会优先覆盖)
 * 3.可以定义data、components、methods 、created、computed等属性(非html代码)
 *
 * 使用方法:
 *  第一步：引入
 *  import { table } from "@/mixins/table.js";
 *  第二步：放入组件里
 *  export default {
 *    mixins: [myMixins],
 *    data() {
 *      return {}
 *    }
 *  }
 *
 *  使用建议:
 *  1.页面list请求数据的方法名定义成 getListData,
 *    这样在点击翻页的时候，table.js会自动调用父页面的getListData方法请求数据
 */
export const table = {
  data() {
    return {
      startRow: 1, // 表格的序号
      clickRow: {}, // 点击的某一行数据
      rowIndex: -1, // 点击的某一行序号
      columnIndex: 0, // 默认选择第0列

      list: [], // 列表数据数据
      listLoading: false, // loading标记
      // 列表数据查询参数
      selectForm: {
        total: 0,
        pageNums: 20,
        pageStart: 1,
      },
    }
  },
  methods: {
    headerClick(column, event) {
      // 获取点击的第几列
      this.columnIndex = column.index;
    },
    handleRow(row, column, event) {
      // 获取点击的第几行
      this.rowIndex = this.rowIndex == row.index ? -1 : row.index;
      this.clickRow = this.rowIndex == -1 ? {} : row;
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.rowIndex == row.index) {
        return "nowRow";
      }
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
      if (this.columnIndex == columnIndex) {
        return "selectdColumn";
      }
    },
    handleSizeChange(val) {
      this.selectForm.pageNums = val;
      // 调用的是父组件的方法 如果父组件有的话,会调用
      if(this.getListData){
        this.getListData();
        this.setCurrentRow();
      }
    },
    handleCurrentChange(val) {
      this.selectForm.pageStart = val;
      // 调用的是父组件的方法 如果父组件有的话,会调用
      if(this.getListData){
        this.getListData();
        this.setCurrentRow();
      }
    },
    // 翻页的时候把值初始化 - 默认没有选中行
    setCurrentRow(){
      this.$nextTick(()=>{
        this.rowIndex = -1
        this.clickRow = {}
      })
    },
  }
}

父组件