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 = -1this.clickRow = {}})},}
}

父组件

<template><div><el-tableref="table"@header-click="headerClick"@row-click="handleRow":row-class-name="tableRowClassName":cell-class-name="tableCellClassName"stripev-loading="listLoading"element-loading-text="Loading":data="list"borderhighlight-current-row><el-table-column align="" label="序号" width="80"><template slot-scope="scope">{{ scope.row.index + startRow }}</template></el-table-column><el-table-column align="" prop="id" label="用户ID" width="200" ><template slot-scope="scope">{{ scope.row.id }}</template></el-table-column><el-table-column align="" prop="mobileNo" label="手机号" width="150" /><el-table-column label="实名状态" width="120"><template slot-scope="scope">{{ (scope.row.realAuth) }}</template></el-table-column><el-table-column label="区块链状态" width="120"><template slot-scope="scope">{{ [scope.row.blockchainState] }}</template></el-table-column><el-table-column align="" prop="articleCount" label="藏品数量" width="150" /><el-table-column align="" prop="payAmount" label="已购金额(元)" width="150" ><template slot-scope="scope">{{ (scope.row.payAmount) && (scope.row.payAmount).toFixed(2) }}</template></el-table-column><el-table-column align="" prop="welfareAmount" label="已捐金额(元)" width="150" ><template slot-scope="scope">{{ (scope.row.welfareAmount) && (scope.row.welfareAmount).toFixed(2) }}</template></el-table-column><el-table-column align="" prop="collectionAccount" label="收款账号(支付宝)" width="" /><el-table-column align="" prop="createTime" label="注册时间" width="150" /></el-table><el-paginationbackground@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="selectForm.pageStart":page-sizes="[10, 20, 30, 40]":page-size="selectForm.pageNums"layout="total, prev, pager, next":total="selectForm.total"></el-pagination></div>
</template><script>
import { table } from "@/mixins/table.js";
import {queryPersonalUserInfoForPage} from "@/api/registUser";
export default {mixins: [table],data() {return {};},created() {this.getListData()},methods:{getListData(isCheck) {this.listLoading = true;queryPersonalUserInfoForPage(this.selectForm).then((res) => {if (res.status != 0) {this.$message.error(res.msg);return;}this.startRow = res.data.startRow;this.list = res.data.list;this.selectForm.total = res.data.total;}).catch((err) => {this.$message.error(err || err.msg);}).finally(() => {this.listLoading = false;});},}
};
</script><style lang="scss" scoped>
</style>

Vue之mixins使用相关推荐

vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
vue 中 mixins 的使用
本文同步发布在:vue 中 mixins 的使用 mixins(混入)就是定义了一部分公共的方法.计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用.下面我们具体来看看怎么使 ...
【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
vue中Mixins 与 Hoc
什么是mixins 在官方文档中混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身 ...
mixins php,vue的mixins属性详解
这篇文章主要介绍了vue的mixins属性详解,现在分享给大家,也给大家做个参考. 首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要 ...
vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
vue的mixins
一.基础提供组件选项的可复用性,比如:data.components.props.created.methods等等.当一个组件引用mixins的时候,所有mixins对象的选项将被"混合 ...
Vue混入mixins
Vue官网上介绍: 混入(mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 虽然平 ...
使用vue的mixins混入实现对正在编辑的页面离开时提示
mixins.ts 1 import { Vue, Component, Watch } from "vue-property-decorator" 2 Component.reg ...
vue中mixins的理解
我的理解是能不用就不用,除非一个js文件在多个vue页面需要使用再用例如: test.js export default {//必须导出data() {return {reqName: '23'}}, ...

Vue之mixins使用

Vue之mixins使用相关推荐

最新文章

热门文章