vue 混入用法（日常笔记1）

1.定义一个mixin

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

2.按需使用mxin

import mixins from '@/mixins/mixins';
export default {
  mixins: [mixins]
}

3.全局使用mxin

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

4.特点

• 对一个项目中很多会重复使用到的函数我们可以使用到vue的mixin(混入)，这样就不需要在多个页面中重复的书写相同的代码
• 在mixin中写的所有的数据，方法以及生命周期钩子，如果当前组件中已经含有了，那么就会合并起来
• 如果键值对的值重复了，就会以组件内的值为准，如components
• 如果是data数据，会被进行递归合并，如果发生冲突时，就会使用组件内的数据
• 混入时发生了冲突的话，vue会依照就近原则进行处理数据

作者：YunJIn_ 链接：www.jianshu.com/p/702b18277… 来源：简书