一文带你完全掌握Vue自定义指令

什么是自定义指令

在Vue中，指令是一种特殊的语法糖，它可以绑定到DOM元素上，用于实现对DOM元素的操作。Vue自带了很多指令比如v-if、v-for、v-bind等，通过这些指令我们可以实现很多功能。

但是如果在项目中需要实现一些特定的功能，而Vue自带的指令又不能满足需求，这时就需要自定义指令了。

如何定义自定义指令

自定义指令分为全局指令和局部指令。

全局自定义指令

全局自定义指令可以在Vue实例中的任意组件中使用，非常方便。我们可以通过Vue.directive方法来定义全局指令：

Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令第一次绑定到元素时调用
  },
  inserted: function (el, binding, vnode) {
    // 元素插入到DOM中时调用
  },
  update: function (el, binding, vnode, oldVnode) {
    // 元素更新时调用
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 组件更新完成时调用
  },
  unbind: function (el, binding, vnode) {
    // 指令与元素解绑时调用
  }
})

上面的代码定义了一个名为my-directive的指令，包含的钩子函数有：

• bind：指令第一次绑定到元素时调用
• inserted：元素插入到DOM中时调用
• update：元素更新时调用
• componentUpdated：组件更新完成时调用
• unbind：指令与元素解绑时调用

这些钩子函数的参数中，el表示绑定指令的元素，binding表示指令的绑定值，vnode表示Vue实例中的虚拟节点，oldVnode表示上一个虚拟节点（只在update和componentUpdated中可用）。

局部自定义指令

局部自定义指令只能在定义它们的组件中使用。我们需要在组件的directives属性中定义局部指令：

Vue.component('my-component', {
  directives: {
    'my-directive': {
      bind: function (el, binding, vnode) {
        // 指令第一次绑定到元素时调用
      },
      inserted: function (el, binding, vnode) {
        // 元素插入到DOM中时调用
      },
      update: function (el, binding, vnode, oldVnode) {
        // 元素更新时调用
      },
      componentUpdated: function (el, binding, vnode, oldVnode) {
        // 组件更新完成时调用
      },
      unbind: function (el, binding, vnode) {
        // 指令与元素解绑时调用
      }
    }
  }
})

和全局指令类似，我们也可以定义多个钩子函数来实现指令的功能。

自定义指令的示例

自定义全局指令

假设我们需要一个全局指令，用于在元素上单击时执行某些操作。我们可以定义一个名为click-outside的全局指令，使用时可以在元素上绑定指令并传入一个函数：

Vue.directive('click-outside', {
  bind: function (el, binding) {
    // 给document添加点击事件监听器
    document.addEventListener('click', function (e) {
      // 如果元素以外的地方被单击，则调用指令绑定的函数
      if (!el.contains(e.target)) {
        binding.value()
      }
    })
  },
  unbind: function (el) {
    // 移除document上的事件监听器
    document.removeEventListener('click')
  }
})

上面的代码实现了一个全局指令click-outside，当元素以外的地方被单击时调用binding.value()方法。使用时可以在元素上绑定指令并传入一个函数：

<div v-click-outside="doSomething"></div>

这里的doSomething是一个需要执行的函数。

自定义局部指令

假设我们需要一个局部指令，用于设置元素的样式。我们可以定义一个名为set-style的局部指令，使用时在组件的directives属性中定义指令，并在元素上绑定指令并传入一个对象：

Vue.component('my-component', {
  directives: {
    'set-style': {
      bind: function (el, binding) {
        // 设置元素样式
        el.style[binding.arg] = binding.value
      },
      update: function (el, binding) {
        // 元素更新时重新设置样式
        el.style[binding.arg] = binding.value
      }
    }
  }
})

上面的代码实现了一个局部指令set-style，可以通过binding.arg获取指令参数（这里是元素的属性），通过binding.value获取指令的绑定值（这里是属性的值）。使用时可以在元素上绑定指令并传入一个对象，例如：

<my-component>
  <div v-set-style:backgroundColor="'red'"></div>
</my-component>

这里的backgroundColor是元素的样式属性，'red'是属性的值。

总结

通过上面的例子，我们可以了解到自定义指令的基本用法，以及如何实现一个全局指令和一个局部指令。在实际项目中，自定义指令可以大大增强Vue的功能，提高代码的可维护性和复用性。