这节来说说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 } } };
虽然混入可以直接这样写,但是我不建议这种写法,因为这样很可能就不能够复用了。
以上的理解是我学习混入并运用之后分析得出的,初步学习可能不是很深刻,未来会加以补充的!