在 Vue.js 中，我们经常需要在多个组件之间共享特定的代码。为了避免重复编写相同的代码，Vue.js 提供了 Mixins，允许我们将一些公共的逻辑封装到一起，然后在不同的组件中复用这些逻辑。本文将介绍如何使用 Mixins 进行代码复用。
什么是 Mixins
Mixins 是一种将一些公共逻辑封装到一起的方式。当我们需要在多个组件中使用相同的逻辑时，我们可以把这些逻辑封装到一个 Mixins 中，然后在需要使用这些逻辑的组件中引入这个 Mixins。这样，我们就可以避免在每个组件中都编写相同的代码，提高代码的复用性。
如何使用 Mixins
在 Vue.js 中，我们可以使用 mixin 函数来定义一个 Mixins。例如，我们可以定义一个名为 myMixin 的 Mixins，如下所示：
-- -------------------- ---- -------
----- ------- - -
------ -
------ -
-------- ------- -------
-
--
-------- -
---------- -
-------------------------
-
-
-在这个 Mixins 中，我们定义了一个 data 函数，返回一个包含 message 属性的对象。我们还定义了一个 sayHello 方法，用来打印 message 的值。
接下来，我们可以在一个组件中使用这个 Mixins。例如，我们可以定义一个名为 myComponent 的组件，如下所示：
const myComponent = {
mixins: [myMixin],
created() {
this.sayHello()
}
}在这个组件中，我们使用了 mixins 选项来引入 myMixin。这样，我们就可以在这个组件中使用 message 和 sayHello 方法了。在 created 钩子中，我们调用了 sayHello 方法，打印出 message 的值。
Mixins 的优先级
当多个 Mixins 中包含同名的属性或方法时，它们的优先级是怎样的呢？Vue.js 会按照以下顺序合并同名属性和方法：
- 子组件本身的属性和方法
- Mixins 中的属性和方法
- 父组件的属性和方法
这意味着，当子组件和 Mixins 中都定义了同名的属性和方法时，子组件的属性和方法会覆盖 Mixins 中的属性和方法。当子组件和父组件（或祖先组件）中都定义了同名的属性和方法时，子组件的属性和方法会覆盖父组件中的属性和方法。
总结
Mixins 是一种将公共逻辑封装到一起的方式，可以提高代码的复用性。在 Vue.js 中，我们可以使用 mixin 函数来定义一个 Mixins，然后在组件中使用 mixins 选项来引入这个 Mixins。当多个 Mixins 中包含同名的属性和方法时，Vue.js 会按照一定的顺序合并它们。掌握 Mixins 的使用方式，可以让我们更加高效地编写 Vue.js 应用程序。
示例代码
下面是一个使用 Mixins 的示例代码，可以帮助你更好地理解 Mixins 的使用方式：
-- -------------------- ---- -------
----- ------- - -
------ -
------ -
-------- ------- -------
-
--
-------- -
---------- -
-------------------------
-
-
-
----- ----------- - -
------- ----------
--------- -
---------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66403e2dd3423812e4e60e51