vue2 mixins混入

提取组件公共部分进行封装，达到公用的目的。

//A组件
export default {
    data(){
        return {show:true}
    },
    methods:{
        toggleShow(){
            this.show=!this.show;
        }
    }
}

//B组件
export default {
    data(){
        return {show:true}
    },
    methods:{
        toggleShow(){
            this.show=!this.show;
        }
    }
}

上述代码中可以发现 A组件和B组件都有公共数据show和公共方法toggleShow，为了避免代码冗余，利用混入提高代码复用性。

//新建一个minxin.js文件，代码如下
//vue有的配置项 mixin都可以配置
export default {
    data(){
        return {show:true}
    },
    methods:{
        toggleShow(){
            this.show=!this.show;
        }
    }
}


//然后分别修改上述A组件B组件代码
//A组件
import mixinA from './mixin'
export default {
   mixins:['mixinA ']
}

//B组件
import mixinB from './mixin'
export default {
   mixins:['mixinB ']
}


。

配置一个mixins属性，接收一个数据，就可以了。代码复用性是不是提高了许多