vue之mixins的使用方法
首先是我们对于mixins的概念的理解:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项,不推荐全局注册混入。其次是使用场景:就比如说我现在将element-ui的弹框组件进行了封装,那我们知道在element1.x版本时,控制弹框组件大小的属性是size,但是升级到2...
·
首先是我们对于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就可以使用了
更多推荐
已为社区贡献4条内容
所有评论(0)