在 Vue.js 中， mixins 是一种代码重用的方式，如果你在多个组件中都需要用到同样的逻辑，那么可以将这个逻辑封装成 mixins，然后在需要的组件中引用 mixins。本文将详细介绍 Vue.js 中 mixins 的使用方法。
什么是 mixins
mixins 类似于多重继承，可以将多个组件中共用的逻辑提取出来，然后封装成一个 mixin 对象，随时引用，并且可以传入参数。mixins 将所有的属性和方法都混入到组件的选项中，使得组件可以重复使用这部分逻辑。
mixins 的使用方式
在 Vue.js 中，可以使用 mixins 方法来创建一个 mixin 对象，包含可以混入到组件中的选项。例如，我们创建了一个名为 auth 的 mixin：
-- -------------------- ---- -------
--- ---- - -
------ -
------ -
------ ---
------- ---
--
--
--------- -
-- ----------------- -
---------- - ----------------
-
--
-------- -
---------- -
-- -- -----
--
------------ -
-- ------
-
-
-在上面的例子中，auth mixin 包含了数据属性和方法属性，其中 data 函数返回了一个对象，包含了 token 和 expire 两个属性，created 生命周期钩子函数中读取本地存储获取 token，并赋值给 token 属性，getToken 和 checkLogin 分别为两个方法。
接下来，我们可以使用 mixins 选项将 auth mixin 混入到我们的组件中：
-- -------------------- ---- -------
------ ---- ---- -------------------
------ ------- -
------- -------
--------- -
-- ------- ---- -- ---- -----------
------------------------
-
-在上面的示例中，我们创建了一个组件，并使用 mixins 选项将 auth 对象混入到组件中。这样，我们就可以在组件中访问 auth 中定义的数据属性和方法，例如在 created 生命周期钩子函数中，我们通过 this 访问了混入后的 token 属性。
mixins 的顺序
当我们将多个 mixin 对象混入到一个组件中时，可能会遇到不同的 mixin 对象中定义了相同的属性或方法名的情况。为了规避这种命名冲突，Vue.js 使用了一定的优先级规则来合并 mixin。具体规则如下：
- 全局混入会被混入到所有组件中，优先级最低
- 先混入的 mixin 的选项会优先被合并，后混入的 mixin 可以覆盖前一个 mixin 中相同的选项
- 如果 mixin 和组件有相同的选项名，那么组件的选项优先级最高
动态混入
除了在组件的 mixins 选项中混入静态的 mixin 对象外，我们还可以使用 Vue.mixin 方法进行全局混入，也可以在组件实例上使用 this.mixin 动态混入一个 mixin。
例如，我们可以在某个组件的某个方法里面动态混入一个 mixin：
-- -------------------- ---- -------
------ ------- -
-------- -
------- -
--------------------------------------- -- -
-- ---- ---- --
------------
-------- -
---------------- -
-----------
-
-
---
-- ------- ----------- --
----------------------------------------
---
-
-
-上面的示例中，我们在 login 方法中使用了 this.mixin 方法动态混入了一个包含 showMessage 方法的 mixin 对象，在方法中可以直接使用 showMessage 方法。
总结
mixins 是一种 Vue.js 中用于代码重用的方式。通过混入多个 mixin 对象，我们可以灵活地重复使用代码逻辑和属性，提高代码的可维护性和可读性。尤其是在多个组件中需要使用共同的逻辑时，mixins 的使用必将大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6477c3ba968c7c53b04213a9