Mixins (混合或混入)
定义的是一个对象
概念
一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项(组件选项:data、watch、computed、methods、created、mounted…)。当组件使用混入对象时,组件和混入对象的同名选项将以恰当的方式进行“合并”。
用法
1)定义一个混入对象mixin(创建一个mixin.js文件)
2)把混入对象mixin混入当前组件中
合并规则
1)data:数据在内部会进行递归合并,并在发生冲突时以组件数据优先(组件和混入对象的数据同一个参数名初始值不同,取组件的值)
2)created、mounted等:同名钩子函数将合并为一个数组,都将被调用且混入对象的钩子将在组件自身钩子之前调用
3)watch、computed、methods等:值为对象的选项,将被合并为同一个对象,两个对象键名冲突时会覆盖混入对象中的方法
特点
1)与vuex的区别
Vuex:用来做状态管理,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之改变
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量时相互独立的,值的修改在组件中不会相互影响
2)与公共组件的区别
公共组件:在父组件中引入组件,相当于在父组件中给出一篇独立的空间供子组件使用,然后根据props来传值,但本质上两者时相对独立的
Mixins:在引入混入对象之后,混入对象与组件中的同名选项进行合并,相当于扩展了父组件,可以理解为形成了一个新的组件
注意
当混入对象methods选项里面包含异步请求函数,而我们又需要再组件中使用异步请求函数的返回值,会出现取不到此返回值的情况
Mixin中
组件中
此时会打印undefined
解决方案:不要返回结果而是直接返回异步函数
Mixin中
组件中
参考文章。
[1] https://www.cnblogs.com/Ivy-s/p/9937173.html
[2] https://cn.vuejs.org/v2/guide/mixins.html