怎么在vue3.0中自定义指令-创新互联

今天就跟大家聊聊有关怎么在vue3.0中自定义指令，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

举个例子，你想让页面的文本框自动聚焦，在没有学习自定义指令的时候，我们可能会这么做。

const app = Vue.createApp({
 mounted(){
  this.$refs.input.focus();
 }, 
 template: ``,
});

在mounted钩子函数里，通过 $refs 获取需要聚焦的 DOM 元素，然后调用 focus 方法完成自动聚焦的功能。

基本使用

上面做法已经实现了我们需要的功能，但是假如说我们有多个组件都需要这个功能，那我们只能把这段代码复制过去，重新实现逻辑。我们下面看下如果使用自定义指令，应该怎么做。

const app = Vue.createApp({
 // 通过 v-[自定义指令名称] 绑定自定义指令
 template: ``,
});
// 注册一个全局自定义指令
app.directive('focus',{
 // 当被绑定的元素插入到DOM的时候执行..
 mounted(el){
  el.focus();
 }
})

如上，我们定义了一个全局自定义指令 focus，并通过 v-focus 绑定到需要聚焦的 input 元素上。如果，其他组件或模块也需要聚焦功能，只要简单的绑定此指令即可。

自定义指令的钩子函数

我们在上面定义指令的时候，会发现其中包含了 mounted 钩子函数，指令还提供了如下钩子函数，我们用代码的形式来给大家列出来。

app.directive('directiveName', {
 // 指令绑定元素挂载前
 beforeMount(el) {},
 // 指令绑定元素挂载后
 mounted(el, binding) {},
 // 指令绑定元素因为数据修改触发修改前
 beforeUpdate(el) {},
 // 指令绑定元素因为数据修改触发修改后
 updated(el) {},
 // 指令绑定元素销毁前
 beforeUnmount(el) {},
 // 指令绑定元素销毁后
 unmounted(el) {},
});

效果就不一一列举了，有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似，大家可以对比着来看。

动态指令参数

下面，我们再来看一个例子。

const app = Vue.createApp({
 template: `