What are the differences between mixins and extends in Vue.js?

What are the differences between mixins and extends in Vue.js?

In Vue.js, mixins are a flexible way to distribute reusable functionalities across components, while extends is used to create a base component that other components can inherit from.

Can you give me an example of how to use mixins?

Sure! You can create a mixin like this:

const myMixin = {
  data() {
    return {
      mixinData: 'Hello from mixin!'
    };
  },
  created() {
    console.log('Mixin created!');
  }
};

Then, include it in your component:

export default {
  mixins: [myMixin],
  // other component options
};

What about extends? How is it different?

Extends allows you to create a base component that other components can inherit from. For example:

const BaseComponent = Vue.extend({
  data() {
    return { baseData: 'Base data' };
  }
});

const ChildComponent = BaseComponent.extend({
  // additional options
});

When should I use mixins instead of extends?

Use mixins when you want to share functionality across multiple components without creating a strict hierarchy. Use extends when you want to create a clear parent-child relationship between components.