vue3.0自定义指令,vue自定义指令详解
本文主要介绍vue3自定义指令的细节。自定义指令分为全局和局部两种，大家都很熟悉。今天我们就来说说vue3中自定义指令的定义、使用和钩子功能的变化。有需要的朋友可以参考一下。
目录
I、寄存器自定义指令1.1、全局自定义指令1.2、部分自定义指令2、自定义指令中的生命周期钩子函数3、自定义指令钩子函数的参数4、自定义指令的参数
一、注册自定义指令
下面的例子都是自定义指令来实现一个输入框自动获得焦点。
1.1、全局自定义指令
在Vue2中，全局自定义指令通过directive挂载在Vue对象上，使用Vue.directive(name ，opt)。
实例1:Vue2全球定制说明
Vue.directive(focus ，{
已插入：(el)={
焦点()
}
})
Inserted是一个钩子函数，当绑定元素被插入到父节点时执行。
在vue3中，vue的实例是由createApp创建的，所以全局自定义指令的挂载方式也发生了变化，指令挂载在App上。
实例2:Vue3全球定制说明
//全局自定义指令
app.directive(focus ，{
已安装(el){
焦点()
}
})
//组件用法
输入类型=text v-focus /
1.2、局部自定义指令
在组件内，指令的引入被称为本地自定义指令。Vue2和Vue3中自定义指令的引入是完全一样的。
实例3:本地用户自定义指令
脚本
//本地自定义指令
const defineDir={
焦点：{
已安装(el){
焦点()
}
}
}
导出默认值{
指令：defineDir，
setup(){}
}
/脚本
二、自定义指令中的生命周期钩子函数
指令定义对象可以提供以下钩子函数(所有这些函数都是可选的，可以根据需要引入)
Created:在应用绑定元素属性或事件侦听器之前调用。当这个指令需要附加一个需要在普通v-on事件监听器之前调用的事件监听器时，这是很有用的。
BeforeMounted:当指令第一次绑定到一个元素并在父组件被挂载之前执行时。
Mounted:在绑定元素的父组件安装后调用。
Before:在更新包含组件的VNode之前调用。
Updated:在包含组件及其子组件的VNode更新后调用。
BeforeUnmounted:在卸载绑定元素的父组件之前调用。
Unmounted:当指令与元素解除绑定并且父组件被卸载时，它只被调用一次。
实例3:测试指令中生命周期功能的执行
模板
差异
输入类型=text v-focus v-if=showbr
button @ click= Chang status { show？隐藏:显示 } } }/按钮
/div
/模板
//本地自定义指令
常量自动对焦={
焦点：{
已创建(){
console . log( created )；
},
beforeMount(){
console . log( before mount )；
},
已安装(el){
console.log(mounted )。
},
更新之前(){
console.log(更新前)
},
已更新(){
console.log(“已更新”)；
},
卸载之前(){
console . log( before unmount )；
},
卸载(){
console . log( unmounted )；
}
},
}
从“vue”导入{ ref }
导出默认值{
指令：自动对焦，
setup(){
const show=ref(true)
返回{
秀，
changStatus(){
show.value=！显示值
}
}
}
}
通过点击按钮，我们发现在创建input元素时，会触发三个hook函数，created、beforeMount和mounted。
当输入元素隐藏时，将触发beforeUnmount和Unmount。
但是，我们添加的beforeUpdate和updated函数没有执行。
此时，当我们将input元素上的v-if更改为v-show时，我们将执行上面的两个方法。具体执行情况我们自己会核实。
从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：
bind函数已被替换为beforeMounted。
更新已被删除。
ComponentUpdated已替换为Updated。
Unbind替换为unmounted。
插入的已被删除。
三、自定义指令钩子函数的参数
钩子函数被赋予了以下参数：
El:指令绑定的元素可以直接操作DOM。
Binding:是一个包含指令所有信息的对象。
binding 包含的属性具体的分别为：
arg自定义指令的参数名。
自定义指令绑定的值。
旧值指令绑定的前一个值。
已执行目录挂钩功能
修改器：包含修改器的对象。
模板
差异
分区v-固定定位/分区
/div
/模板
脚本
//自定义指令的动态参数
常量自动对焦={
已修复：{
安装前(el，binding){
console.log(el ，el)
console.log(binding ，binding)
}
}
}
导出默认值{
指令：自动对焦，
setup(){
}
}
/脚本
四、自定义指令参数
用户定义的指令也可以有参数，这些参数可以是动态的，可以根据组件实例数据实时更新。
实例4:用户自定义指令动态参数
模板
差异
div v-fixed:pos= pos data style= width:100px；高度：100px背景：灰色定位/格
/div
/模板
脚本
//自定义指令的动态参数
常量自动对焦={
已修复：{
安装前(el，binding){
el.style.position=fixed
El . style . left=binding . value . left px
El . style . top=binding . value . top px
}
}
}
导出默认值{
指令：自动对焦，
setup(){
const posData={
左：20，
最高：200
}
返回{
posData，
}
}
}
/脚本
什么时候需要自定义指令？
需要对普通DOM元素进行底层操作，然后会用到自定义指令。
需要在指定的DOM元素上使用一些函数，但是当需要操作大量的DOM元素或者大的改动时，建议使用组件而不是指令。
关于vue3自定义指令的细节这篇文章就到这里了。有关vue3自定义指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。