Mixins in Vue

How to use mixins in Vue

1. Mixins mixing

Mixins provide a very flexible way to distribute the takeable functions in the vue component. A mixed-in object can contain any component options (vue in script part). When a component uses a blended object, all options for blended objects will be "mixed" into the option to modify the component itself.

A hybrid mechanism provided by vue can better realize component function reuse. Mixins can contain any component options (data, created, mounted, methods, filters, etc.). After the component is introduced, the relevant options will be merged, which is equivalent to expanding the properties of the parent component after introduction;

2. The difference between components and mixins

After reference, the component is equivalent toA separate space is created in the parent component, to perform corresponding operations based on the value from the parent component props, essentially the two are stillClearly divided, relatively independent.

After introducing the component, mixins merges the contents inside the component such as data, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various attribute methods of the parent component are expanded.

Simple understanding:Reduce code redundancy, improve development efficiency, reuse component data, methods, etc. to improve development speed

3. Why use mixins

• Mixins are divided into global mixing and local mixing. Let's focus on local mixing.
• NoticeAfter the different components are mixed,Different instances will be generated, and the data will be isolated from each other and will not affect each other.
• Pay attention to the introductionWhile mixins,Repeat definitions in the component, the attribute method in minxins will be overwritten
• After using mixins, the component contains all the data in mixins and can be usedthisMake an access. You can also usevariableInstead of a separate file to define mixins

4. Actual use of Vue project

• Newsrc/minxins/

//Introduce the download file interfaceimport { downTemplateFile } from '@/api/home'
// Export myMixins functionexport const myMixins = {
  data() {
    return {

    }
  },
  methods: {
    // Download method, parameter file ID    toLogin(id) {
      downTemplateFile({ id1: id }).then(res => {
        if ( != 97) {
          let blob = new Blob([res])
          let objectUrl = (blob)
          if () {
            return (blob, 'Download file.doc')
          } else {
            let a = ('a')
            (a);
             = 'none'
            ('href', objectUrl)
            ('download', 'Download file.doc')
            ();
            (objectUrl);
          }
        } else {
          this.$('System error, please try again later!  ')
        }
      })
    }
  }
}

• Introduce registration and use mixins

<template>
  <div class="index">
    <button @click="downLoadTempFile(1)">triggermixinsDownload method</button>
  </div>
</template>
<script>
// Introduce myMixins function, import whatever is exportedimport { myMixins } from '@/mixins';
export default {
  data(){
    return {
    }
  },
  // register  mixins: [myMixins],
  methods:{
    async downLoadTempFile(id){
      // You can call the method in myMixins by directly using this. method name      (id)
    },
  }
}
</script>

5. Global mixing (not recommended)

import Vue from 'vue'
import App from './'

import { myMixins } from "@/mixins"

(myMixins);

 = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.