This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

🍕 preface

  • Recently is really a little busy, every day more really a little do not know what to write, so the previous record of their own article out.
  • There might be a little bit of water, so you can look at it if you want.
  • mixinWe can make our components reuse some of the same life cycles or methods that we configure, of coursemixinOnly in thevue 2.xUse,Vue 3.0It’s not needed anymore.

🥪 Application Scenario

  • When there are two very similar components, except for some individual asynchronous request to the rest of the configuration are the same, even the parent component of value is the same, but enough differences exist between them, this time will have to split into two components, if split into two components, once you will have to take the functional changes in the risk of updating the code in the two files.

  • This is where mixins come in, and mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses mixin, all mixin options are “blended” into the component’s own options. This might sound abstract, but let’s do a simple example.

🥧 Actual case

  • Compare the two componentsscriptWhat are the differences and similarities
/ / components
<script>
import { findClassHourByCurricid } from '@/api/system/class'
export default {
    name: 'AllClassHour'.props: {
        recordDeatil: {
        type: Object.required: true
        },
        detailShow: {
            type: Boolean.require: true.default: false
        }
    },
    data () {
        return {
            data: [].columns: [{title: 'number'.dataIndex: 'index'.key: 'index'.align: 'center'.width: '10%'.customRender: (text, record, index) = > `${index + 1}`
                        },
                        {
                            dataIndex: 'classname'.title: 'Class Name'.key: 'classname'.width: '50%'.// align: 'center',
                            scopedSlots: { customRender: 'classname'}}, {title: 'Creation date'.dataIndex: 'crtime'.key: 'crtime'.width: '50%'.// align: 'center',
                            scopedSlots: { customRender: 'crtime'}}].pagination: false.loading: false.status: false
        }
    },
    mounted () {
    this.getClassHour()
        this.test()
    },

    methods: {
        test () {
            console.log('Test common Components')
        },
        getClassHour () {
            this.data = []
            const params = {
                curricid: this.recordDeatil.curricid
            }
            this.loading = true
            findClassHourByCurricid(params).then(res= > {
                const classHourDetail = res.data.data
                this.data = classHourDetail
                this.loading = false
                }
            )
        }
    }
}

</script>
Copy the code
2 / / component
<script>
import { findStudentByCurricid } from '@/api/system/class'
export default {
    name: 'AllStudent'.props: {
        recordDeatil: {
        type: Object.required: true
        },
        detailShow: {
            type: Boolean.require: true.default: false
        }
    },
    data () {
        return {
            data: [].columns: [{title: 'number'.dataIndex: 'index'.key: 'index'.align: 'center'.width: '10%'.customRender: (text, record, index) = > `${index + 1}`
                        },
                        {
                            dataIndex: 'truename'.title: 'Real Name'.key: 'truename'.width: '50%'.// align: 'center',
                            scopedSlots: { customRender: 'truename'}}, {title: 'Chinese name'.dataIndex: 'chanema'.width: '50%'.// align: 'center',
                            key: 'chanema'}].pagination: false.loading: false.status: false
        }
    },
    mounted () {
        this.getStudent()
        this.test()
    },
    methods: {
        test () {
            console.log('Test common Components')
        },
        getStudent () {
            this.data = []
            const params = {
                curricid: this.recordDeatil.curricid
            }
            this.loading = true
            findStudentByCurricid(params).then(res= > {
                const studentDetail = res.data.data
                this.data = studentDetail
                this.loading = false
                }
            )
        }
    }
}

</script>
Copy the code

As you can see, the configuration is basically the same except for the asynchronous request to get the data from the table, so we can extract the logic here and create items that can be reused:

export const publish = {
    props: {
        recordDeatil: {
        type: Object.required: true
        },
        detailShow: {
            type: Boolean.require: true.default: false
        }
    },
    data () {
        return {
            data: [].pagination: false.loading: false.status: false}},methods: {
        test () {
            console.log('Test public Methods')}}}Copy the code
  • Then we remove all the duplicate configurations and methods from the component, referring to thismixin

  • Run the code and you’ll find the same result

  • It is important to understand that even if we are using an object rather than a component, lifecycle functions are still available to us. We can also use it heremounted()The hook function, which is applied to the lifecycle of the component. This way of working is really flexible and powerful.

👋 is at the end

  • When we need to do the same configuration or a very similar component, we can try it outMixinMixing in the same configuration or method you need will make our development much more efficient.
  • This, of course,mixinOnly applicable tovue 2.x.Vue 3.0theComposition APIIt’s already strong.

🌅 past wonderful

Fix echarts map rotation highlighting ⚡

Read still not clear redraw and rearrangement come over beat me 👊, I say!!

How to elegantly write component examples using Vuepress (1) 👈

How to elegantly write component examples using Vuepress (below) 👈