vue mixin（混入）的使用

场景：分发 Vue 组件中的可复用功能，当一个功能在多个vue页面中使用时，就可以使用mixin来进行复用

警告：当mixin和组件的数据或者方法名冲突时，优先组件！

// Mixins
const Mixin = {
  data () {
    return {}
  },
  created () {
    // this.hello()
  },
  methods: {
    hello() {
      console.log('你好，我是mixin')
    }
  }
}

export default Mixin 

// 局部引入
import Mixin from '../mixins/Mixin.js'
export default {
  name: 'index',
  mixins: [Mixin ],
  data () {
    return {
    }
  },
  created () {
    this.hello()
  }
}

// main.js 全局引入
import Vue from 'vue'
import App from './App'
import router from './router'
import Mixins from './mixins/mixin.js'

Vue.config.productionTip = false

Vue.mixin(Mixins)

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})