<commit_before>---
title: Mixins
type: guide
order: 301
---

## Basics

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.

Example:

``` js
// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"
```

## Option Merging

When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies.

For example, data objects undergo a shallow merge (one property deep), with the component's data taking priority in cases of conflicts.

``` js
var mixin = {
  data: function () {
    return {<commit_msg>Fix mixin data merging documentation (#1902)<commit_after>---
title: Mixins
type: guide
order: 301
---

## Basics

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.

Example:

``` js
// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"
```

## Option Merging

When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies.

For example, data objects undergo a recursive merge, with the component's data taking priority in cases of conflicts.

``` js
var mixin = {
  data: function () {
    return {
{'fraction_non_alphanumeric': 0.0977886977886978, 'fraction_numerical': 0.004914004914004914, 'mean_word_length': 3.5752808988764047, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6307561', 'n_tokens_mistral': 605, 'n_tokens_neox': 572, 'n_words': 260}