混入 Mixin

可以将组件中共有的属性、组件、方法等抽取出来。如果方法是生命周期函数，则会把现有的和 mixin 中的合并起来。如果方法不是生命周期函数，则会用 mixin 中的替换原函数中的。

• mixin.js

  import { debounce } from 'common/utils'
  
  export const goodsImgLoadMixin = {
    data() {
      return {
        goodsItemImgLoad: null
      }
    },
    mounted() {
      const refresh = debounce(this.$refs.scroll.refresh, 300)
      this.goodsItemImgLoad = () => {
        refresh()
      }
      this.$bus.$on('goodsItemImgLoad', this.goodsItemImgLoad)
      // console.log('这是mixin')
    }
  }
  
  export const backTopMixin = {
    data() {
      return {
        // 回到顶部
        isTopShow: false
      }
    },
    methods: {
      // 回到顶部
      backTop() {
        this.$refs.scroll.backTo(0, 0)
      }
    }
  }
  

• xxx.vue

  import { goodsImgLoadMixin, backTopMixin } from 'common/mixin'
  
  export default {
    name: "GoodsDetail",
    data() {
      return {
      
      }
    },
    // 使用混入
    mixins: [goodsImgLoadMixin, backTopMixin],
    methods: {
      scrollListener(pos) {
        // 显示回到顶部按钮
        this.isTopShow = pos.y <= -1166
      }
    }
  }