首先是我们对于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就可以使用了

Logo

前往低代码交流专区

更多推荐