Vue中的全局混入或局部混入

混入mixin的概念

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能.
如果一個組件、過濾器、方法等使用頻率很高，就可以使用混入的方式。方便復用，以免一個個引入.

定義混入對象

// mixin.js
import comTitle from 'common/comTitle'; 

const mixin = {
  // 混入數據
  data() {
    userName: '用戶名'
  },
  // 混入公用組件
  components: {
    comTitle
  },
  // 混入過濾器
  filters: {
    currencyFormat(value, symbol = '￥') {
      return symbol + value;
    }
  },
  // 混入方法
  methods: {
    goBack() {
      history.back();
    }
  },
  // 生命周期鈎子函數混入
  created: function() {
    this.goBack();
  }
}
export default mixin;

全局混入

// main.js
import mixin from 'mixins/mixin';
Vue.mixin(mixin);

局部混入 (在組件中混入)

new Vue({
  mixins: [mixin]
})

混入之后，就可以在組件中直接通過 this 使用了。