VUE2进阶至VUE3八（自定义指令Directive）

雪优
2,621 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

vue2中的自定义指令相信大家都有所了解以及使用，vue3中自定义指令的钩子函数与vue2中的钩子函数以及使用都略有不同~ 下面进行一一介绍

钩子函数

vue3中自定义指令的钩子函数其实是与vue2的生命周期大致是一样的。

  • created : 在绑定元素的attribute前或事件监听器前调用；

  • beforeMount: 在元素插入到DOM前调用；

  • mounted: 在绑定元素的父组件以及他自己所有的子节点都挂载完成之后调用；

  • beforeUpdate: 绑定元素的父组件更新之前调用（绑定的数据产生变化）；

  • updated: 在绑定元素父组件以及他自己所有元素的子节点都更新后调用（绑定的数据产生变化）；

  • beforeUnmount: 绑定元素的父组件卸载之前调用；

  • unmounted: 绑定元素父组件卸载后调用（v-if进行切换）；

比较常用的钩子函数有mounted、updated、unmounted。

钩子参数

自定义指令在定义时需要以v开头进行命名，也可进行数据绑定以及拓展符的使用。

<template>
  <div class="home">
    <Jxx v-jxx:xiao.xue="{ background: 'blue'}"/>
  </div>
</template>
<script setup lang="ts">
 import Jxx from '../components/jxx.vue';
 import { ref,Directive,DirectiveBinding } from 'vue'
 const vJxx: Directive = {
   mounted(...args: Array<any>) {
     console.log(args); // 此处输出的为钩子函数，展示为下图
   }
 }
</script>

image.png

上图中输出的数组中有四个值，下面就来介绍一下这四个钩子参数的含义。

  • 第一个参数为el：指令绑定到的元素，可用于直接操作此DOM。

  • 第二个参数binding：一个对象，包含下面的propety。

    • value: 传递给指令的值。
    • oldVlue: 之前的值，无论是否更改，在beforeUpdate和updated中可以使用。
    • arg: 传递给指令的参数，如果有的话。v-jxx:xiao，参数是“xiao”。
    • modifiers: 一个包含修饰符的对象，如果有的话。
    • instance: 使用该指令的组件实例。
    • dir：指令的定义对象。

  • 第三个参数 vnode：代表绑定元素的底层VNode。

  • 第四个参数 prevNode（上一个虚拟DOM ），只在beforeUpdate和updated中可以使用，表示之前渲染中代表指令所绑定的元素VNode。

简化形式

只需要在mounted和updated中实现，不关心其他钩子函数时，可以将指令定义为一个简写函数。

<template>
  <div class="home">
    <input type="text" v-model="value">
    <Jxx v-jxx="{ background: value}"/>
  </div>
</template>
<script setup lang="ts">
 import Jxx from '../components/jxx.vue';
 import { ref,Directive,DirectiveBinding } from 'vue'
 let value = ref<string>('')
 type bind = {
   background: string
 }
const vJxx: Directive = (el:HTMLElement, binding:DirectiveBinding<bind>) => {
  el.style.background = binding.value.background;
}
</script>

上述代码实现的是一个简单的自定义指令，通过input框内输入颜色改变组件的背景颜色。

今天的代码水到这里，突然莫名的想吐槽，上个月去了一家小公司呆了两周 一开始就只是交了医保和公积金，说社保会在四月份补缴，导致现在的公司一入职就给我把社保交上了 这样就导致社保公积金不一致，所以就需要原公司在15号之前将公积金退款再由本公司进行补缴 然后上个小公司的人事各种有事 各种拖拉 搞得我真的好害怕 会影响这家公司四月份公积金的扣款~ 真是自作孽 早知如此 何必当初。。。所以 去小公司之前 一定擦亮双眼。。。

avatar
文章
阅读
粉丝