混入 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
        }
      }
    }