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...