Vue.js 2.0 是一种流行的开源 JavaScript 框架，它以其简单易用的语法、响应式组件和灵活可扩展的能力而闻名。Mixins 是 Vue.js 实现代码复用的一种技术，可以让我们将一些具有相同逻辑的组件提炼出来，并在多个组件中共享这些逻辑。本文将介绍 Vue.js 2.0 中如何使用 Mixins，以及如何创建自己的 Mixins。
1. 什么是 Mixins
Mixins 是一种 Vue.js 技术，允许我们将可复用的代码提取出来并作为一个独立的 Vue 实例。这些 Mixin 实例可以包含任意的组件选项，如 data、methods、computed、watch 等属性，它们可以被多个 Vue 组件通过 mixins 选项引用，以实现代码复用。
2. 如何使用 Mixins
使用 Mixins 非常简单。在 Vue 组件的选项中，我们可以通过 mixins 数组来引用一个或多个 Mixin。
--- ------- - -
----- ---------- -
------ -
-------- ------- -------
-
-
--
----------------------------- -
------- ----------
--------- -------- ------- ---------
---上面的代码中，我们定义了一个名为 myMixin 的 Mixin。它包含了一个 data 选项，其中有一个 message 属性。然后，我们创建了一个 Vue 组件，并在它的 mixins 选项中引用了 myMixin。最后，在组件模板中，我们可以直接使用 message 属性。
这样，我们就实现了代码的复用。如果你需要在多个组件中使用这个 Mixin，只需将它添加到相应组件的 mixins 选项中即可。
3. 创建自己的 Mixins
创建自己的 Mixin 非常简单。我们只需编写一个包含 Vue 选项的对象，然后将它作为一个 Mixin 使用。例如，下面的代码实现了一个名为 log 混入，打印出每个组件的创建和销毁：
--- --- - -
-------- ---------- -
---------------------- ----------
--
---------- ---------- -
---------------------- ------------
-
--
---------------------------------- -
------- ------
-------- ---------- -
-------------------- ----------
--
---------- ---------- -
-------------------- ------------
-
---在上面的代码中，我们创建了一个名为 log 的 Mixin，它具有 created 和 destroyed 生命周期钩子。我们然后创建了一个名为 example-component 的 Vue 组件，并将 log 混入到它的 mixins 选项中。
现在，每当 example-component 被创建或销毁时，都会触发生命周期钩子和 log Mixin 中的方法，从而打印出"Component created"和"Component destroyed"消息。
通过自己创建 Mixin，我们可以轻易地将一些通用的逻辑提炼出来，让组件更加简洁高效。同时，我们也可以混入多个 Mixin，从而实现更加复杂的功能。
结论
Mixins 是 Vue.js 中非常强大的一种技术，能够帮助我们实现代码复用，提高代码的可维护性和可扩展性。通过本文的介绍，我们了解了如何使用 Mixins，以及如何创建自己的 Mixins，希望它对你在 Vue.js 2.0 开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6715b5eead1e889fe2188d4e