Vue中的自定义指令（附带实例）

在 Vue 中，指令的使用无处不在，前面一直使用的 v-bind、v-model、v-on 等都是指令。Vue 中也提供了自定义指令的能力，对于一些定制化的需求，配合自定义指令来封装组件，可以使开发过程变得非常容易。

Vue 内置的指令已经提供了大部分核心的功能，但是有时仍需要直接操作 DOM 元素来实现业务功能，这时就可以使用自定义指令。

先来看一个简单的示例。首先，新建一个名为 demo.directive.html 的文件，我们来实现如下功能：页面上提供一个 input 输入框，当页面被加载后，输入框默认处于焦点状态，即用户可以直接对输入框进行输入。示例代码如下：

<div id="Application">
  <input v-getfocus />
</div>

<script>
const App = Vue.createApp({});

App.directive('getfocus', {
  // 当被绑定此指令的元素被挂载时调用
  mounted(element) {
    console.log("组件获得了焦点");
    element.focus();
  }
});

App.mount("#Application");
</script>

如以上代码所示，调用应用实例的 directive 方法可以注册全局的自定义指令，上述代码中的 getfocus 是指令的名称，在使用时需要加上 v- 前缀。运行上述代码，可以看到，页面被加载时其中的输入框默认处于焦点状态，可以直接进行输入。

在自定义指令时，通常需要在组件的一些生命周期节点进行操作。自定义指令除支持 mounted 生命周期方法外，还支持使用 beforeMount、beforeUpdate、beforeUnmount 和 unmounted 生命周期方法，我们可以选择合适的时机来实现自定义指令的逻辑。

上述示例代码中采用全局注册的方式来自定义指令，因此所有组件都可以使用，如果只想让自定义指令在指令的组件上可用，也可以在定义组件（局部注册）时，在组件内部进行 directives 配置来自定义指令，示例代码如下：

const sub = {
  // 组件内部的自定义指令
  directives: {
    getfocus: {
      mounted(el) {
        el.focus();
      }
    }
  },
  mounted() {
    // 组件挂载
    console.log(this.version);
  }
};

App.component("sub-com", sub);

自定义指令的参数

上面我们演示了一个自定义指令的小例子，这个例子本身非常简单，没有为自定义指令进行赋值，也没有使用自定义指令的参数。我们知道，Vue 内置的指令是可以设置值和参数的，例如 v-on 指令，可以设置值为函数来响应交互事件，也可以通过设置参数来控制要监听的事件类型。

自定义指令也可以设置值和参数，这些设置数据会通过一个 param 对象传递到指令中实现的生命周期方法中，示例代码如下：

<div id="Application">
  <input v-getfocus:custom="1" />
</div>

<script>
const App = Vue.createApp({});

App.directive('getfocus', {
  // 当被绑定此指令的元素被挂载时调用
  mounted(element, binding) {
    if (binding.value === 1) {
      element.focus();
      // 将打印参数：custom
      console.log("参数:" + binding.arg);
    }
  }
});

App.mount("#Application");
</script>

上述代码很好理解，指令设置的值 1 被绑定到 param 对象的 value 属性上，指令设置的 custom 参数被绑定到 param 对象的 arg 属性上。

有了参数，Vue 自定义指令的使用非常灵活，通过不同的参数进行区分，我们可以很方便地处理复杂的组件渲染逻辑。

对于指令设置的值，也允许直接设置为 JavaScript 对象，例如下面的设置也是合法的：

<input v-getfocus:custom="{a:1, b:2}" />