Vue.js Mixins

在 Vue.js 中，mixin 是一组已定义的逻辑，以 Vue.js 指定的预定义方式存储。我们可以反复使用这些 mixin 将功能添加到我们的 Vue.js 实例和组件中。因此，我们可以说 mixin 用于为 Vue 组件分发可重用的功能。它们提供了一种灵活而直接的方式来处理 Vue.js 组件并在它们之间共享可重用代码。

mixin 对象可以包含任何组件选项。当一个组件使用 mixin 时，mixin 中的所有选项都会“混合”到组件自己的选项中，并成为组件选项不可或缺的一部分。

为什么 Mixins 如此重要？

以下是使 Vue.js mixin 必不可少的一些功能的列表

• js mixin 确保您不必重复自己。您可以有效地为 Vue.js 组件分发可重用的功能，并一遍又一遍地使用它们。
• js mixin 提供了出色的灵活性选项。mixin 对象包含 Vue 组件选项，这意味着它是 Vue.js 的 mixin 和组件选项的混合。
• js mixin 提供了很棒的安全功能。如果您编写得好，它们不会影响其定义范围之外的更改。
• js mixin 是代码可重用性的一个绝佳平台。

Vue.js mixin 应该解决的问题

使用 Vue.js 的主要原因是解决程序中的重用问题。假设您有两个组件包含一个方法，该方法执行完全相同的事情或在两个组件中执行相同的功能，就像以下代码一样

组件 1

组件 2

使用这两个组件后，您的 App.vue 文件应该导入并声明这两个组件，如下所示

在这里，您可以看到我们在两个组件中重复了 click 方法代码块。这不是处理内存资源的理想和有效的方法；这就是为什么引入 Vue.js Mixin 的原因。

Vue.js 引入了 mixin 作为解决此问题的绝佳方案。通过使用 mixin，您可以封装一段代码或功能，然后在需要时将其导入到各种组件中使用。

Vue.js Mixin 语法

Vue.js mixin 语法看起来像以下代码

让我们举一个简单的例子来很好地理解 Vue.js Mixin 的概念。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出