组件继承合并--Vue.mixin

我们在用Vue进行前端开发的时候，往往会遇到有很多个组件内，他们都有类似的data，类似的方法。这些大量重复的代码，如果正常编写出来，代码既不美观也不优雅，而且看起来也相当复杂。所以vue官方提供了一个极其好用的方式来解决这个问题

那就是mixin

先来看看官方的介绍

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

 

在Java开发中 如果我们遇到两个类有大量相似代码的时候，我们通常会定义一个父类，来讲这些重复代码写在一起，然后再让这两个类来继承父类的代码和方法。

class Animal{
    run(){}
}
class Person extends Animal{
    //run(){}
}
class Dog extends Animal{
    //run(){}
}

 

而在Vue中，每个组件export出来的是对象，所以不能像类那样继承，于是Vue提供了类似于类的继承的方法 mixin

 

使用方法，在这里贴上自己项目的部分代码。

定义一个mixin.js 文件

import {debounce} from './utils';
​
export const itemListenerMixin = {
    data(){
        return {
            itemImgListener: null,
        }
    },
    methods:{
​
    },
    mounted(){
        let ne