122. mixin（混入）

（1）mixin的作用： 

1. 使用mixin可以抽离组件的公共逻辑；
2. 就是有很多组件需要同一个方法、同一个变量、做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。
3. 方法和参数在各组件中不共享；
4. 组件内使用后，混入对象内的周期函数和方法变量都会和组件合并。
5. 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的键；

6.  值为函数的选项（生命周期函数），如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用；

• 值为对象的选项重名。举例：methods中的方法重名

1）mixin文件

 2）使用mixin的文件

3）打印的结果：组件会覆盖与混入对象重名的方法

 

•  值为函数的选项重名。举例：created生命周期函数重名

1）mixin文件

2）使用mixin的文件

3）打印的结果：先执行mixin的created，再执行组件的

 

 

（2）注意：

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。（不推荐全局引入）

当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值（如promise）。解决方案：不要返回结果而是直接返回异步函数。

（3）与vuex的区别：

1. vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
2. Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

（4）与公共组件的区别：

• 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
• Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

 

使用举例：

mixin文件 

​​​​​​​

引入mixin.js：

参考：vue中mixins的使用方法和注意点（详）_a378113472的博客-CSDN博客