vue之mixins的使用方法

首先是我们对于mixins的概念的理解：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项，不推荐全局注册混入。
其次是使用场景：就比如说我现在将element-ui的弹框组件进行了封装，那我们知道在element1.x版本时，控制弹框组件大小的属性是size，但是升级到2.0后变成了width，并且值是百分比，很显然之前的用法已经不能用了，但是我又不想更改我之前的代码，我们就可以使用mixins
1，mixins的使用
我们在自己项目目录下创建了一个mixins.js具体代码如下

export default {
  computed: {
    width() {
      let width;
      switch (this.options.size) {
        case 'small':
          width = '50%';
          break;
        case 'medium':
          width = '60%';
          break;
        case 'large':
          width = '80%';
          break;
        default:
          width = '45%';
          break;
      }
      return width;
    },
  },
};

弹框组件中的用法如下：

这样我们的mixins就可以使用了