vue中使用mixins

Mixins （混合或混入）——定义的是一个对象

1.概念：一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项（组件选项：data、watch、computed、methods、created、mounted…）。当组件使用混入对象时，组件和混入对象的同名选项将以恰当的方式进行“合并”。

2.用法

　　1）定义一个混入对象mixin（创建一个mixin.js文件）

　　

2）把混入对象mixin混入当前组件中

　　　

3.合并规则

1）data：数据在内部会进行递归合并，并在发生冲突时以组件数据优先（组件和混入对象的数据同一个参数名初始值不同，取组件的值）

2）created、mounted等：同名钩子函数将合并为一个数组，都将被调用且混入对象的钩子将在组件自身钩子之前调用

3）watch、computed、methods等：值为对象的选项，将被合并为同一个对象，两个对象键名冲突时会覆盖混入对象中的方法

4.特点

1）与vuex的区别

　　　　Vuex：用来做状态管理，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之改变

　　　　Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量时相互独立的，值的修改在组件中不会相互影响

2）与公共组件的区别

　　　　公共组件：在父组件中引入组件，相当于在父组件中给出一篇独立的空间供子组件使用，然后根据props来传值，但本质上两者时相对独立的

　　　　Mixins：在引入混入对象之后，混入对象与组件中的同名选项进行合并，相当于扩展了父组件，可以理解为形成了一个新的组件

5.注意

当混入对象methods选项里面包含异步请求函数，而我们又需要再组件中使用异步请求函数的返回值，会出现取不到此返回值的情况

　　Mixin中

　　　　

　　组件中

　　　　

　　　　此时会打印undefined

解决方案：不要返回结果而是直接返回异步函数

　　Mixin中

　　　　

　　组件中

　　　　

参考文章地址：1.https://www.cnblogs.com/Ivy-s/p/9937173.html

　　　　　　　 2.https://cn.vuejs.org/v2/guide/mixins.html