一首歌的事件聊聊vue自定义指令

前言

vue3.0自带了一些内置指令，如v-text，v-html,v-bind,v-if等。但是有些场景下，这些指令满足不了需求，所以我们可以自定义指令。

组件和指令区别
组件:复用代码以及抽象的时候使用组件。
指令:对DOM元素进行底层操作使用指令。

指令的参数

(el, bindings, vnode, preVnode)

• el:绑定这个自定义指令的元素，可用于直接操作 DOM
• bindings:是一个对象，包含(name传递给指令的值,value指令的值,oldValue先前的值,arg传给指令的参数)等
• vnode:Vue 编译生成的虚拟节点
• preVnode:上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

(除了 el 之外，将其它参数视为只读，不要修改它们。)

指令的钩子函数

• created：在绑定元素的 attribute 或事件监听器被应用之前调用；
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
• mounted：在绑定元素的父组件被挂载后调用；
• beforeUpdate：在更新包含组件的 VNode 之前调用；
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
• beforeUnmount：在卸载之前调用；
• unmounted：当指令卸载后调用，仅调用一次；

自定义全局指令和局部指令

全局注册注册通过app实例的directive方法进行注册。
局部注册通过给组件设置directive属性注册。

自定义全局指令

// 自定义全局指令，可以在main.ts 的app上注册就可以全局使用
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);

app.directive('preventClick', {
    mounted(el, bindings, vnode, preVnode) {
        el.addEventListener('click', (e) => {
           console.log('aaa')
        },true)
    }
})

自定义局部指令

//使用
<span v-outside="clickNone" @click="onHandle"></span>

// 实现一个点击区域空白处，关闭区域的指令
directives: {
  outside: {
    mounted(el, binding:any) {
      function eventHandler(e) {
        if (el.contains(e.target)) {
          return false
        }
        // 如果绑定的参数是函数，正常情况也应该是函数，执行
        if (binding.value && typeof binding.value === 'function') {
          binding.value(e)
        }
      }
      // 用于销毁前注销事件监听
      el.__click_outside__ = eventHandler
      // 添加事件监听
      document.addEventListener('click', eventHandler)
    },
    beforeUnmount(el) {
      // 移除事件监听
      document.removeEventListener('click', el.__click_outside__)
      // 删除无用属性
      delete el.__click_outside__
    }
  }
},
setup() {

}