vue mixin混入用法

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中的代码，这样不用在多个组件中写重复代码了