vue的mixin的使用

对一个项目中很多会重复使用到的函数我们可以使用到vue的mixin(混入)，这样就不需要在多个页面中重复的书写相同的代码

1.定义一个mixin

// mixin.js
const mixin = {
  data() {
    return {
      hello: 'hello Mixin'
    }
  },
  created() {
    console.log('在mixin中vue的data、生命周期、方法等都可以使用');
  },
  methods: {
    hello() {
      console.log(this.hello);
    }
  }
}
export default mixin;

使用mixin

// 1. 局部使用
import mixin from '@/mixin/mixin';
<script>
export default {
  mixins: [mixin]
}
</script>
// 2.全局使用 main.js
import mixin from '@/mixin/mixin';
Vue.Mixin(mixin)

注意
1.在mixin中写的所有的数据，方法以及生命周期钩子，如果当前组件中已经含有了，那么就会合并起来
2.如果键值对的值重复了，就会以组件内的值为准，如components
3.如果是data数据，会被进行递归合并，如果发生冲突时，就会使用组件内的数据
4.混入时发生了冲突的话，vue会依照就近原则进行处理数据