如何使用自定义指令？

自定义指令到底是什么

首先一定要明白，自定义指令其实就是一个对象！只是该对象中包含了类似组件生命周期钩子的函数而已，如created，mounted，该钩子函数会收到当前DOM元素作为参数，从而可以使用该DOM元素进行操作。

ts 复制代码

<template>
 <input id="IamInput" v-focus />
</template>

<script setup>
const vFocus = {
  mounted: (el:any) => {
    console.log('el是啥子哦',el);   
    el.focus()
    }
}
//当然也可以不写成箭头函数
const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
</script>

当然上面只是局部注册，我们一般用的是全局注册，即在main.ts中进行注册：

ts 复制代码

const vFocus = {
  mounted: function (el: any) {
    console.log('el是啥子哦', el);
    el.focus();
  },
};
app.directive('focus',vFocus)

自定义指令中的钩子函数

自定义指令中提供了许多钩子函数，我们可以在不同的钩子函数中调用不同的参数

js 复制代码

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

为了容易理解，我们直接用一个案例来学习自定义指令即可。

案例

ts 复制代码

<template>
    <input id="IamInput" v-focus="num" />
    <el-button @click="num++">点击使得num++</el-button>
</template>
<script lang="ts" setup>
const num=ref(1)
const vFocus = {
  mounted(el: any,binding:any, vnode:any, prevVnode:any) {
    el.value=binding.value //el是DOM元素，el.value就是input框的值，我们在元素挂载时设置一个默认值为1
 },
 updated (el: any,binding:any, vnode:any, prevVnode:any) {
// 我们在元素更新时设置乘以2倍的操作
console.log('binding',binding);
el.value=binding.value//更新input框的内容
 },
};
 //在main.ts中全局挂载
 app.directive('focus',vFocus)
 </script>

该案例非常简单，大家应该一看就明白，首先定义一个input框，然后定义自定义指令，在DOM元素挂载时把binding.value（如官网所说，binging中的value参数就是传递给DOM元素的值，在这里就是num）赋值给el.value，el.value是什么？当然就是输入框的内容啦，所有一上来，输入框中的值就是num的值，即1（注：其实这里一上来是2，因为DOM挂载时mounted和update钩子都会触发，会把值*2）
当点击按钮时，num会+1，由于num变化了，v-focus这个指令中的binging.value也发生了变化，因此会触发自定义指令中的update钩子，此时我们对其做乘以2的操作，并赋值给输入框

挂载时

点击按钮时

总结

以前总害怕自定义指令，觉得很难，其实搞懂了发现很简单，只不过就是一种封装的思想，在一个对象中可以拿到当前的DOM元素，并对其做操作，该对象中有不同的钩子供我们使用，就是如此easy~

注：本文参考文献来自官网：自定义指令 | Vue.js (vuejs.org)