SoFunction
Updated on 2025-04-05

Project Practice of vue mixins Code Reuse

Introduction:

I came to a new company two years ago and started using vue to develop, and the degree of code reuse is relatively low. In the later stage, I have a lot of development experience and read some design pattern books. I just started to slowly summarize some experience in code reuse. Share it,

PS: Vue version 2.6

Scene:

1. There are many pure functions required by current components in the code, and there are too many methods

<!-- Main file -->
<template>
    <button @click="clickHandle">button</button>
</template>

<script>
export default {
    name: 'PageDemo',
    methods: {
        func1(){},
        func2(){},
        func3(){},
        clickHandle(){
            this.func1();
            this.func2()
            this.func3()
            ('button clicked')
        }
    },
}
</script>

If the current component is not easy to split, many functions will appear and the code will appear unclear. My current method of handling it ismixinsMix in,Referring to the MVC idea, the current file's methods are only written and directly referenced by templates, and other functions are referenced through mixed inscription.。

// 

export default {
    methods: {
        func1(){},
        func2(){},
        func3(){},
    }
}
<template>
    <button @click="clickHandle">button</button>
</template>

<script>
// Main fileimport ComposeDemo from './compose-demo'
export default {
    name: 'PageDemo',
    mixins: [ComposeDemo],
    methods: {
        clickHandle(){
            this.func1();
            this.func2()
            this.func3()
            ('button clicked')
        }
    },
}
</script>

Make full use ofmixinsThere are many advantages.

2. For example, you have a component that needs to throw two data, directlyv-modelnot applicable. Need to adopt$emitmethod

// Components<template>
   <input v-model="a" @change="inputChangeHandle"/>
   <input v-model="b" @change="inputChangeHandle" />
</template>

<script>
export default {
    name: 'ComponentChild',
    props: {
        propA: {
            type: String
        },
        propB: {
            type: String
        }
    },
    data(){
        return {
            a: ,
            b: ,
        }
    },
    methods: {
       inputChangeHandle(){
           this.$emit('update-data', {a:, b:})
       } 
    }
}
</script>


// Caller<template>
    <component-child :propA="" :propB="" @update-data="getData"/>
</template>

<script>
import ComponentChild from './'
export default {
    name: 'Page1',
    components: {ComponentChild},
    data(){
        return {
            query: {
                a: 'Default data a',
                b: 'Default data b'
            }
        }
    },
    methods: {
        getData(payload) {
            const {a,b}=payload;
             = a;
             = b;
        }
    }
}
</script>

If you have multiple places to useComponentChildComponents, then each call place needs to write a method to listen@update-dataevent.

At this point, you can change it like this

// Pure function, introduce ComponentChild, and declare getData method// 

<script>
import ComponentChild from './'
</script>
export default {
    components: {ComponentChild},
    
    methods: {
        // Usually, multiplexed business components will have the same data structure, all with the sum.  If it is inconsistent, then rewrite the method directly in the parent component        getData(payload) {
            const {a,b}=payload;
             = a;
             = b;
        }
    }
}



// Caller<template>
    <component-child :propA="" :propB="" @update-data="getData"/>
</template>

<script>
import ComposeComponentChild from './'
export default {
    name: 'Page1',
    mixins: [ComposeComponentChild]
    data(){
        return {
            query: {
                a: 'Default data a',
                b: 'Default data b'
            }
        }
    },
    methods: { }
}
</script>

Borrowing from Angular's dependency injection,PageDo not declare or quote directlyComponent, but by mixingComposeUse directly.

ComponentComponents,ComposeIntroducedComponentAnd registerComponent(Declare additional methods),PageCall component mixingCompose, you can use it directlyComponentComponents

3. Similarly, a lot of data data can be reused in this way to avoid templated declarations.

For example, commonly used tables require data

<script>
    import {defaultPageSize}from '@/setting'
    export default {
        data(){
            return {
                tableList: [],
                pageSize: defaultPageSize,
                pageNo: 1,
                totalRecords: 0,
            }
        }
    }
</script>

All the above data can be assembled into oneThe file is mixed into the place you want to use, of course, you can also use it incompose-tableReference the Registration Form component.

Summarize:

  • Advantages: Improve code reusability, and the same component can also be divided into more detailed functions.
  • Disadvantages: mixins cannot automatically use files that are automatically navigated to the implemented files through the editor, and require full project search. It is very convenient for people familiar with it. For newcomers, reading code will be a bit difficult.

This is the end of this article about the project practice of vue mixins code reuse. For more related vue mixins code reuse content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!