Understanding mixins
With mixins, we can add additional methods, data properties, and life cycle methods to a component’s option object.
In the following example, we first define a mixin that contains a greet method and a greeting data field:
/** greeter.js */
export default {
  methods: {
    greet(name) {
        return `${this.greeting}, ${name}!`;
    }
  },
  data() {
    return {
      greeting: 'Hello'
    }
  }
}
Then we can use the greeter mixin by importing and assigning it as part of the mixins field in the component’s option object, as follows:
<script>
import greeter from './mixins/greeter.js'
export default {
  mixins: [greeter]
}
</script>
mixins is an array that accepts any mixin as its element, while a mixin...