Vue学习记录之十三自定义指令directive

devtools/2024/10/25 13:16:03/

一、自定义指令的方法

Vue中有v-if、v-for、v-show、v-model等一些内置指令，其实我们也可以通过directive来自定义组件，但是他属于破坏性的更新。

必须以vNameOfDirective 的形式来命名本地自定义指令，以使得他们可以在模版中直接使用, 标签名称：v-NameofDirective

定义格式如：

//必须v开头，后面跟着一个对象
const vMove:Directive = {//限制类型为Directive....
}
`模版中使用： v-Move="{传递的参数}"`

二、自定义指令初探及参数的获取

Vue3 指令的钩子函数：

created：元素初始化的时候
beforeMount：指令绑定到元素后调用只调用一次
mounted：元素插入父级dom调用
beforeUpdate：元素被更新之前调用
update：这个周期方法被移除改用updated
beforeUnmount：在元素被移除前调用
unmounted：指令被移除后调用只调用一次

<template><div><button>切换</button><!--使用自定义指令：v-move, 还可以自定参数aaa,自定义修饰符 lvmanba --><A v-moves:aaa.lvmanba="{background:'red'}"></A></div>
</template><script setup lang='ts'>javascript">
import { ref,reactive,type Directive} from 'vue'
import A from './components/A.vue'
//自定义一个vMove指令，类型为Directive（这个需要引入），并获取参数，在生命周期的每个阶段(钩子函数)都可以获取。
const vMoves: Directive = {created: (...args:Array<any>) => { //...解构之后编程了一个数组console.log("初始化====>created");console.log(args)},beforeMount() {// 在元素上做些操作console.log("悬挂之前=======>beforeMount");},mounted() {console.log("悬挂完成======>mounted");},beforeUpdate() {console.log("更新之前beforeUpdate");},updated() {console.log("更新结束updated");},beforeUnmount() { console.log("======>卸载之前beforeUnmount");},unmounted() {console.log("======>卸载完成unmounted");}
}
</script>
<style scoped></style>

获取的参数格式如下（并获取参数，在生命周期的每个阶段(钩子函数)都可以获取）：4个参数
在这里插入图片描述

生命周期钩子参数详解：
第一个参数（div.A）：(el) 当前绑定的DOM 元素【类型：HTMLElement】
第二个参数：传递的全部信息【类型：DirectiveBing】
1(arg）、传递的参数
2(dir)、当前这个组件的实例（一个对象，在注册指令时作为参数传递）。
3(instance): 使用指令的组件实例
4(modifiers): 包含修饰符(如果有的话) 的对象。
5(oldValue)：先前的值，仅在 beforeUpdate 和 updated 中可用。
6(value): 传递过来的值(传递给指令的值)。
7(object):
第三个参数：当前元素的虚拟DOM 也就是Vnode
第四个参数：null （prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用）

三、根据参数可以定制我们指令的功能

我们在实际使用一般使用 mounted、updated 和 unmounted 这三个钩子。

<template><div><button>切换</button><A v-moves:aaa.lvmanba="{background:'red'}"></A></div>
</template>
<script setup lang='ts'>javascript">
import {