zoukankan      html  css  js  c++  java
  • [前端开发]Vue mixin

    • 两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过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
    
  • 相关阅读:
    测试发帖
    C# 四舍五入算法(转)
    赚钱,爱好,生活
    c# 当前dll目录
    BlogWriter
    调用com+时,提示 0x800706f7,error msg:占位程序接收到错误数据,(本地调用时提示:不支持此接口)
    测试2
    系统架构设计 & 避免循环引用(转载)
    Visual Studio 2008查找替换用的正则
    Myeclipse webinf/lib包加载问题
  • 原文地址:https://www.cnblogs.com/kaba/p/12960451.html
Copyright © 2011-2022 走看看