vue中mixin混入用法,通常是将多个组件中的公共部分抽出来,这样在组件中就可以避免写重复的代码,用法:
1、创建mixin.js,放入相同的部分,注意这里是个对象
export const itemListerMixin = { data(){ return{ } }, mounted(){ this.busRefresh = ()=>{ if(this.$refs.scroll) { this.$refs.scroll.refresh() } } this.$bus.$on("item-image-load", this.busRefresh) }, methods:{ } }
这里看到像组件中vue实例里的生命周期及方法等等都可以放进去
2、在多个组件中使用
import {itemListerMixin} from 'assets/common/mixin' //我这边路径是assets/common
export default { name: "Home", mixins: [itemListerMixin], //这里使用 data(){ return{ banner:[], recommend:[], currenttype:'pop', homelist: { pop:{ page:0,list:[] }, new:{ page:0,list:[] }, sell:{ page:0,list:[] } ...
这样在所有使用混入的组件中的mounted中都复用了mixin中mounted中的代码,这样不用在多个组件中写重复代码了