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 使用了。