https://vuejs.org/v2/guide/mixins.html

Mixin 可用來分離組建中重複出現的資料、函式等，將其抽出，透過引用的方式使用，引入的 Mixin 中的資料、Methods 甚至生命週期將被「混入」組件中。說起來有點像是 Component，具備可複用性，只是它沒有 View 的部分。

若組件中已存在相同名稱的資料或函式，會以 Component 中的為優先

範例：

sampleMixin.js

export default {
  methods: {
    someMethod: function () {
      console.log('I\'m method')
    }
  }
}

someComponent.vue

import sample from './sampleMixin.js';
export default {
   mixins: [sample],
   created() {
      this.someMethod()
   }
}

全域引入

有些 Mixin 我們希望在引入後可隨時全域做使用，透過在 main.js 引入，即可達到此效果，不過也要注意容易會有污染的問題。

承上範例，若在 main.js 中引入，則組件中就可以直接使用了。

main.js

import sample from './sampleMixin.js';
Vue.mixin(sample)

someComponent.vue

// import sample from './sampleMixin.js';
export default {
   // mixins: [sample],
   created() {
      this.someMethod()
   }
}