mixins的概念及使用

一，mixins的概念

mixin是vue提供的一种方式来分发vue组件的可复用功能，可以将相同的方法、字段等抽离出来，避免重复定义。混入分为局部混入和全局混入，一个mixin对象可以包含任意组件选项，data、methods、mounted等。
并且它的生命周期函数先执行。

二，使用方法
在今天做微信小程序项目时，为了解决每一个tabbar都需要用到的一个功能，提升代码的整洁和复用性，所以用到了mixins。

• 首先需要在根目录创建一个名为mixins的文件夹,并在内部创建一个后缀名为.js的文件
• 在需要用到的vue页面进行引用 下列是引用的方法

<script>
  import badgeMix from '@/mixins/tabbar-badge.js' //引用mixins
  export default {
    mixins: [badgeMix],//将内部方法挂载
    data() {
      return {
      };
    }
  }
</script>

在小程序中如果想实现分享功能，需要在各个组件中单独写分享方法，如果页面太多的话，非常麻烦。所以可以使用mixin来简化这个流程。

注意点:

• mixin 中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;

• mixin中定义的生命周期函数会比引用组件的生命周期先执行, 会和组件中定义的methods,created等选项合并调用;

• mixin对象里的(components、methods 、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据

• 如果同时引入多个mixin对象, 执行顺序和引入顺序一致;