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