[前端开发]Vue mixin

2024-10-09 05:52:49

两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？

这时就可以使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大

具体应用在电商app中，better-scroll 中，每次mounted时需要通过加载图片的高度刷新容器高度，在Home和Detail中都用到了同样的方法，新建一个mixin.js

import {debounce} from 'common/utils'

export const itemListenerMixin = {

  data(){

    return {

      itemImgListener:null

    }

  },

  mounted(){

    let newRefresh = debounce(this.$refs.scroll.refresh,100)

    this.itemImgListener = () =>{

      newRefresh()

    }

    this.$bus.$on('itemImgLoad',this.itemImgListener)

    console.log('haha');

  }

}

在Home和Detail中引入、注册即可

import {itemListenerMixin} from 'common/mixin'

mixins:[itemListenerMixin]

mixin的执行顺序问题

当mixin中和组件中同时定义了相同的生命周期钩子，mixin会被先注册，此时组件中的生命周期钩子就可以对其进行修改，mixin也会被先推入数组，组件次之

  //mixin

  const hi = {

    mounted() {

      console.log('mixin')

    }

  }

  //component

  new Vue({

    el: '#app',

    mixins: [hi],

    mounted() {

      console.log('component')

    }

  });

  //output in console

  > component

  > component

最新文章

热门文章