vue2 vue3 中指令总结

vue 内置了一些指令，也提供了自定义指令的接口。

指令的作用：可把一些可复用的逻辑封装成指令，以实现逻辑复用，尤其是需要直接操作 DOM 时，可把这些操作封装成指令，能极大提高代码复用性和可维护性。

指令按照使用范围看，分为全局指令和局部指令（在某个组件内部使用的）。

指令和组件一样，具有一些在特定时期执行的函数，叫作指令钩子，就是通过它们定义指令的。

使用方式

有一个 v-test 指令。

<template>
  <div v-test:disabled.foo="'directive'">
    <h1>{
  { msg }}</h1>
  </div>
</template>

: 之后的是指令参数，类似 v-on:keyup 中的 keyup 。
. 之后的时指令修饰符，foo 是修饰符。

参数只能有一个，修饰符可有多个。

v-test:disabled:boo.foo.zoo="msg"

在指令内部，可获取到这样的对象：

{
   
  arg: "disabled:boo"
  modifiers: {
   
    foo: true,
    zoo: true
  }
}

希望不同情况下绑定不同的参数，可使用动态参数。

v-test:[argu].foo.zoo="msg"

参数必须在修饰符之前。

指令的等号后面是指令表达式，其值对应 binding 对象的 value 属性。

binding 一个对象：

{
   
  arg: "disabled",
  expression: "msg",
  modifiers: {
   
    foo: true
  },
  name: "test",
  value: "你好",
}

vue2 指令定义方式

以插件的形式定义一个全局 v-click-outside :

export const clickOutside = (Vue, options) => {
   
  Vue.directive('clickOutside', {
   
    inserted(el, binding, vnode) {
   
      const {
   
        value
      } = binding
      // const _this = vnode.context
      // NOTE 技巧：处理函数挂载在元素上，方便解绑时移出事件监听
      el.onClick = ({
    
        target
      }) => {
   
        if (el.contains(target)) {
   
          // 点击内部
          console.log('clickInside')
        } else {
   
          // 点击外部
          console.log('clickOutside')
          value && value()
        }
      }
      document.addEventListener('click', el.onClick, false)
    },
    unbind(el, binding, vnode) {
   
      document.removeEventListener('click', el.onClick, false)
    },
  })
}

注册插件：

main.js

Vue.use(clickOutside)

使用：

<template>
  <div>
    <h3>测试 v-click-outside</h3>
    <div v-click-outside="onClickOutside"<