mixin(混入)

看下官方介绍：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

一个混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

 

通俗易懂的话来说一个.vue文件由template，script，style组成，

混入的方法可以把mixin这个对象和.vue文件的script里面的内容“混入”（mixin对象的结构和.vue的script里面的结构一样），

既此组件既可以调用组件内部的script，也可以调用mixin里的。

 

场景运用：

有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性。

他们可能会公用一部分业务逻辑，但是他们的页面结构又不相同。这个时候就可以使用mixin来让代码复用。

（类似于JS库，暴露出来的方法达到函数复用的效果。又区别于JS库，它继承了vue中script所有对象，包括生命周期，data，methods）

 

mixin的使用：

在需要的页面引入，注册即可。

 

 

 

实操：

 

 

 

可以看出：

1.页面和mixin的created都会执行，先执行mixin的，再执行当前页面的；

2.当前页面可以访问mixin的data和methods;

3.mixin里的方法可以调用页面的data和methods;

4.可以在当前页面改变mixin里的data

注意：当本组件与mixin有同名方法或同名数据时，有先调用本组件的方法或数据，混入的部分失效