在 Vue 中，指令是一个允许我们在 DOM 元素上添加一些特殊行为的指令，例如 v-if、v-show、v-for 等。但是有时候我们需要自定义一些指令，以实现特定的功能，如点击外部区域关闭弹窗、表单验证等等。Vue 提供了自定义指令的 API，但是如果我们需要在多个组件中使用同一个自定义指令，就需要进行复用。这时候，Mixins 就是一个非常好的解决方案。
Mixins 简介
Mixins 是一种在多个组件中共享一些公共功能的方式。它可以将一些组件中的相同代码抽离出来，形成一个可复用的模块，然后将其混入到多个组件中。这样可以大大减少代码的重复性，提高代码的可维护性和可读性。
在 Vue 中，我们可以使用 mixins 属性来定义一个 Mixin，如下所示：
----- ------- - -
--------- -
-------------------- ---------
-
-然后，我们可以将这个 Mixin 混入到一个组件中，如下所示：
----------------------------- -
------- ----------
--------- -
------------------------- ---------
-
--这样，当我们创建 my-component 组件时，myMixin 中的 created 钩子函数也会被调用，同时，my-component 中的 created 钩子函数也会被调用。
在 Mixins 中定义自定义指令
既然 Mixins 可以在多个组件中共享一些公共功能，那么我们就可以在 Mixins 中定义自定义指令，然后将其混入到多个组件中，以实现自定义指令的复用。
下面，我们来看一个例子。假设我们需要定义一个自定义指令，用于实现点击外部区域关闭弹窗的功能。我们可以先在 Mixins 中定义这个指令，如下所示：
----- ------------ - -
-------- -------- ------ -
-------------------- - -------- ------- -
-- ----- -- ------------ -- --------------------------- -
----------------------------------------
-
-
--------------------------------------- ---------------------
--
---------- -
------------------------------------------ ---------------------
-
-在这个 Mixins 中，我们定义了一个名为 clickOutside 的指令，它绑定了 el 元素和 binding 对象。在 bind 钩子函数中，我们给 el 元素绑定了一个 clickOutsideEvent 事件处理函数，当点击页面时，如果点击的不是 el 元素或 el 元素的子元素，就会执行 vnode.context[binding.expression](event)，也就是执行绑定到指令上的函数。在 unbind 钩子函数中，我们移除了 clickOutsideEvent 事件处理函数。
接下来，我们可以将这个 Mixin 混入到多个组件中，以实现自定义指令的复用。如下所示：
----------------------------- -
------- ---------------
-------- -
------- -
--------- - -----
-
-
--在这个组件中，我们将 clickOutside Mixin 混入进来，然后定义了一个名为 close 的方法，用于在点击外部区域时关闭弹窗。
最后，我们在模板中使用自定义指令，如下所示：
----------
-----
------- ------------ - -------------------
---- ----------- -------------------------------------
------
-----------在模板中，我们使用了自定义指令 v-click-outside，将 close 方法绑定到了指令上，这样当点击 Content 区域之外的区域时，就会执行 close 方法，从而实现了点击外部区域关闭弹窗的功能。
总结
通过使用 Mixins，我们可以将自定义指令的复用性大大提高，减少代码的重复性，提高代码的可维护性和可读性。在实际开发中，我们可以将一些常用的自定义指令封装成 Mixins，然后在需要使用的组件中进行复用，以提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655909fad2f5e1655d388255