vue mixins是什么及应用

墨蓝 2023-08-17 17:02 94阅读 0赞

**mixins是什么？**

官网对此的解释比较文绉绉，通俗的理解很简单，就是提供功能抽象

如A，B，C 。。。Z等很多个页面用到同一个功能，此时的做法就应该把该功能抽象出来，mixins就是干这个的

当然，如果这个功能一个函数就能解决，就没必要这么干了，单独建个文件，专门放一些公用函数就行，mixins能干的比这大多了

**上案例：**

项目开发中，多个页面要查询数据详情，接口是一样的，但请求参数的不同返回结果也会不同，抽象该功能是最好的方法，以下是代码，具体接口请自行替换

import { fetchMemberReportDetail } from '@/api/memberReport'
    
    export default {
        methods: {
            memberReportDetail(queryObj, cb) {
                fetchMemberReportDetail(queryObj).then(res => {
                    if(parseInt(res.status) === 200 && parseInt(res.data.error_code) === 0) {
                        cb && cb.call(this, res.data.data)
                    }else{
                        this.$message.error(res.data.error_msg)
                    }
                }).catch(res => {
                    this.$message.error('网络异常，请稍后再试')
                })
            }
        }
    }

应用：

import memberReportDetail from '@/mixins/memberReport'
    
    export default {
        name: "hdDetail",
        mixins: [memberReportDetail],
        data() {
            return {
                companyName: '',
                memberType: ''
            }
        },
        created() {
            this.getMemberReportDetail()
        },
        methods: {
            getMemberReportDetail() {
                //  根据需要自行设置查询参数
                const queryObj = {}
                this.memberReportDetail(queryObj, this.setData)
            },
            setData(data) {
                // 根据返回的数据接口自行设置
                this.companyName = data.companyName 
                this.memberType = data.memberType 
            }
        }
    }

**总结：**

mixins适用于带有组件功能性质的抽象，组件具有的钩子函数，属性，它全有，而且组件还可以根据自身需要重写mixins方法

转载于:https://www.cnblogs.com/diantao/p/11434259.html