vue 混入

这节来说说vue的混入(mixin)。

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

既然是用来分发组件中可复用的功能，那么混入一定符合聚合/组合复用原则。

我们需要在混入里放什么东西呢？我的理解是：混入里可以放一个类或多个类，也可以只放方法和功能。根据面向对象单一职责原则和开闭原则，排除掉放多个类，若是只放方法和功能，那么我觉得混入就没有意义了。最后我的总结是：混入里最好放一个类或者是多个类组合或聚合成的一个类。

知道混合是做什么用的之后，就可以开始做自己的小demo了。

首先模拟一个业务场景，有多个列表数据，每个列表都有增删改查的功能。每一次的增删改查需要触发列表查询方法重新渲染，而每次重新渲染都需要加入loading。此时我们可以将loading划分成一个类，而他的功能是显示与不显示。

在项目里新建一个js文件，取名为loadingMixin.js：

export default {
    data() {
        return {
            showLoading: false,
        }
    },
    methods: {
        showLoadingFun() {
            this.showLoading = true
        },
        hideLoadingFun() {
            this.showLoading = false
        }
    }
};

混入文件已经完成，接下来就是在组件中混入此类：

<script>
import loading from "@/loadingMixin"
export default {
    mixins: [loading]
    data() {
        list: [],
        form: {}
    },
    mounted() {
        this.showLoadingFun() //调用混入显示loading的方法
        this.getList(this.form)
        .then(() => {
            this.hideLoadingFun() //调用混入隐藏loading的方法
        })
    },
    methods: {
        getList(form) {
            //此方法用来整理查询条件，并调用查询方法
        }
    }
}
</script>

先将混入的类引到组件里，然后用vue mixins的属性获取混入的类。多个组件使用的方法类似，由此实现复用的作用。

混入里可以写vue的任何属性和方法：data,computed,methods,created,mounted等,而且当混入个组件都有同一属性时，会先执行混入类里的属性和方法，所以上面的demo可以在混入里写mounted：

export default {
    data() {
        showLoading: false
    },
    mounted() {
        this.showLoading = true
    },
    methods: {
        hideLoadingFun() {
            this.showLoading = false
        }
    }
};

虽然混入可以直接这样写，但是我不建议这种写法，因为这样很可能就不能够复用了。

以上的理解是我学习混入并运用之后分析得出的，初步学习可能不是很深刻，未来会加以补充的！

转载于:https://www.cnblogs.com/btlbk/p/11511411.html