详解vue如何使用自定义指令
作者：想干到35岁的程序猿
在Vue的模板语法中,我们学了很多指令,当然除了这些指令,Vue也允许我们自己定义自己的指令,所以本文就来和大家聊聊如何使用自定义指令吧
自定义指令到底是什么
首先一定要明白，自定义指令其实就是一个对象！只是该对象中包含了类似组件生命周期钩子的函数而已，如created，mounted，该钩子函数会收到当前DOM元素作为参数，从而可以使用该DOM元素进行操作。
<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中进行注册：
const vFocus = {
mounted: function (el: any) {
console.log('el是啥子哦', el);
el.focus();
},
};
app.directive('focus',vFocus)自定义指令中的钩子函数
自定义指令中提供了许多钩子函数，我们可以在不同的钩子函数中调用不同的参数
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) {}
}
为了容易理解，我们直接用一个案例来学习自定义指令即可。
案例
<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如何使用自定义指令的文章就介绍到这了,更多相关vue自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！