这是我参与「第四届青训营」笔记创作活动的第4天

前言

这是我在做青训营项目所使用的一个属性，感觉复用性挺好的，便深入了解了一下。

Mixins是什么

官方文档写的是：一个包含组件选项对象的数组，这些选项都将被混入到当前组件的实例中

一开始我认为mixin就是和组件一样的，但深入了解后，才知道两者是有区别的。

通常组件在引用后，就相当于在父组件开辟了一个独立的空间，在父组件通过引入并通过component属性注册，通过组件间通信来实现各种操作。

而mixins其本质上是一个js文件，但其拥有着和vue组件类似的结构，如data、components、methods以及生命周期钩子created等等。我们可以将我们需要的功能及数据传入mixins选项中，在组件中import进来并通过mixins属性调用。

对于组件引用，就好像是父组件 + 子组件 >> 父组件 + 子组件

而对于mixins，就是父组件 + mixins >> 新的父组件

mixins是在引入组件之后，将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

mixins和component功能有些类似，都有提取常用或公用部分作为独立的一部分，但mixin对于内容来说采用的是合并，component对于内容是独立的，仍旧只归属于自己使用。

Mixins有两种使用方式，分别是全局混入和局部混入

就用我所做的项目为例子吧，首先现在项目文件夹里创建一个mixins文件夹，其中放入mixin.js文件

然后就是编写所需的数据以及方法

最后再在需要的组件里调用即可

全局混入的话就是在项目的main.js文件中将其引入使用

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

PS：全局混入常用于插件的编写

Tips：如果在组件中定义了与mixins中相同的methods的话，mixins中的方法会被其覆盖。而且当组件和mixins同时调用了生命周期钩子时，mixins的钩子会先被执行。

当我们的项目里多个组件需要相同的数据及方法时可以使用，就比如我所做的项目里，每一个组件里都需要的相同的方法都写在了mixins里，每个组件都将其调用，大大提高了代码的复用性，也使代码更加清晰明了。

mixins是个很好用的属性，在项目开发里合理的运用，可以大大提高代码的复用性，使得项目更加清晰有条理化。