Mixins

Mixins can add methods, properties, and default life cycle methods to components that consume them. In the following example, we are defining a mixin that adds a greet method and a greeting field to the component's data function:

export default {
  methods: {
    greet(name) {
      return `${this.greeting} ${name}`
    }
  },
  data() {
    return {
      greeting: 'Hello'
    }
  }
}

Mixins allow multiple components' shared functionality to be defined independently. They are used through a mixins component property, which accepts an array.

In the App.vue file, we can consume the mixin by setting the component's mixins property.

The properties and methods of the mixin are then available in the component (just as they would be if they were defined in the component...