一、VUE的mixins
mixins是对vue组件的一种扩展,将一些公用的常用数据或者方法,构建一个可被混入的数据结构,被不同的vue组件进行合并,就可以在不同的vue组件中使用相同的方法或者基础数据。
mixins和vuex的区别。
vuex是公共状态管理,在一处引用组件改变了vuex里面的数据状态,其他引入vuex数据的组件也会对应修改,所以引用的数据指向的都是一处,在js中,有点类似于浅拷贝
vue引入mixins数据,mixins数据或方法,在每一个组件中都是独立的,互不干扰的,都属于vue组件自身。在js中,有点类似于深度拷贝
mixins何时使用
只是提取公用的数据或者通用的方法,并且这些数据或者方法,不需要组件间进行维护,就可以使用mixins,类似于js中封装的一些公用的方法
示例
例如多个菜单、页面中涉及到同一个、多个下拉数据的查询条件,每次定义,调用接口都是重复,所以可使用mixins
新建js文件
import { OpeShopListApi } from '@/api/omsOperation/OpeShopListApi';
export default {
data() {
return {
fxgShopList: []
}
},
created() {
this.initFxgShopList()
},
methods: {
initFxgShopList() {
OpeShopListApi.opeShopList().then(res => {
this.fxgShopList = res || [];
});
},
}
}
引用:
import shopMin from '@/mixins/shop';
mixins: [shopMin], //混入多个文件的写法
跟正常data中定义的数据一般使用就可以
一、Less的mixin
允许你将一个类嵌入到另一个类中,被嵌入的类也可以看作变量
Less把这种特性称作 mixin,中文把翻译为“混入”或“混合”,其目的就是实现公用样式的复用
less文件
.one, #two {
color: red;
}
.mixin-one {
.one();//括号是可选的
}
.mixin-two {
#two(); //括号是可选的
}
编译后的css
.one,
#two {
color: red;
}
.mixin-one {
color: red;
}
.mixin-two {
color: red;
}