freeCodeCamp/guide/english/vue/mixins/index.md

title
Mixins

Mixins

A constant problem is that we use some small functions in a lot of Vue components. Instead of copying them into each of them, we can create mixins. Those can be included and will then be merged into the current component.

Examples

Let's look at the following example:

We see here that the mixin is merged into the context of the Vue Component, data of the mixin will be merged as well.

var myMixin = {
  methods: {
    hello: function(name) {
      return "Hello " + name;
    }
  }
};

new Vue({
  mixins: [myMixin],
  created: function() {
    console.log(this.hello("John"));
  }
});

// this will return print: Hello John

var myMixin = {
  created: function() {
    console.log("running mixin constructor");
  }
};

Here we see that the constructor of the mixin is always executed before that of the component.
new Vue({
  mixins: [myMixin],
  created: function() {
    console.log("running component constructor");
  }
})
// this will print:
// running mixin constructor
// running component constructor

Here we see that the Component will override the definitions in the mixin if there is a conflict.

var myMixin = {
  methods: {
    foo: {
      console.log('mixin foo');
    },
    bar: {
      console.log('mixin bar');
    }
  }
};

var comp = new Vue({
  mixins: [myMixin],
  methods: {
    bar: function() {
      console.log('component bar');
    }
  }
});

comp.foo(); // prints "mixin foo"
comp.bar(); // prints "component bar"

In this case we can use it to make a global readOnly Variable

// use global mixins carefully
Vue.mixin({
  data: function() {
    return {
      get greeting() {
        return "World";
      }
    }
  }
});

Vue.component('page-greeting', {
  props: ,
  template: `
    <div>
      <h1>
        Hello {{ greeting }}
      </h1>
    </div>
  `
});