Vue3自定义指令_vue3局部自定义指令

目录

1.局部自定义指令

1.1函数简写

1.2完整生命周期写法

自定义指令的生命周期：

2.全局自定义指令

2.1简写

2.2有指令的生命周期

---

除了官方设定的v-if,v-for等内置指令外，我们还可以自定义指令以提升编写效率。我们主要以简写方式来定义。

1.局部自定义指令

只能在当前组件使用的指令叫局部自定义指令。

1.1函数简写

如果只需要在updated,mounted的时候执行相同的逻辑，不关心其他周期函数，则最好是简写。自定义指令的关键在于把变量类型设置为Directive；自定义指令定义的时候，那个变量必须以v开头

<template>
  <button @click="show=!show">组件切换</button>
 
  <div v-change.bbb="'black'">函数简写</div>  <!--'black'是传给自定义指令的值 .bbb是自定义的修饰符（可选）-->
</template>
<script lang="ts" setup>
import {ref,Directive, DirectiveBinding,} from "vue";
const vChange: Directive = (el:HTMLLIElement,dir:DirectiveBinding)=>{ 
el.style.backgroundColor = dir.value
 // dir.arg是指令传递的修饰符值bbb
 // dir.value是black
}
</script>

1.2完整生命周期写法

想要在每个自定义指令生命周期的时候有不同的逻辑，就可以写完。自定义指令的生命周期与vue3组件生命周期类似。

自定义指令的生命周期：

created：在绑定元素的 attribute 或事件监听器被应用之前调用；
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
mounted：在绑定元素的父组件被挂载后调用；
beforeUpdate：在更新包含组件的 VNode 之前调用；
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
beforeUnmount：在卸载绑定元素的父组件之前调用；
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次
 

这里直接演示如何定义，如何使用参考前面简写。

const vMove: Directive = { //类型设置为Directive ，名字必须以v开头
//vue3的自定义指令的钩子函数与vue组件的钩子函数写法一致
  mounted(el:HTMLLIElement,dir:DirectiveBinding) { //其他生命周期函数也有这几个参数，参数1：绑定指令的元素；参数2：指令的参数
    // dir.arg
    // dir.value
  },
 
//其他生命周期函数.....
 
}

2.全局自定义指令

全局自定义指令可以在任意组件使用。通过在main.js文件中挂载在app上，实现全局自定义指令

2.1简写

定义：

//main.js挂载全局指令
app.directive('focus', (el,dir)=>{  //好像自定义指令名不需要v开头了
    console.log('我是全局指令')
})

使用： 

 <div v-focus="'black'">函数简写</div>

2.2有指令的生命周期

//挂载全局指令
app.directive('focus', {
    mounted(el, binding){
        console.log('我是全局指令') 
    }
})