脚本宝典收集整理的这篇文章主要介绍了vue3 自定义指令详情，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
以下实例都是实现一个输入框自动获取焦点的自定义指令。
在vue2中，全局自定义指令通过 directive 挂载到 Vue 对象上，使用 Vue.directive('name',opt)。
实例1：Vue2 全局自定义指令
Vue.directive('focus',{
inserted:(el)=>{
el.focus()
}
})
inserted 是钩子函数，在绑定元素插入父节点时执行。
在 vue3 中，vue 实例通过createApp 创建，所以全局自定义指令的挂载方式也改变了， directive 被挂载到 app上。
实例2：Vue3 全局自定义指令
在组件内部，使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。
实例3：局部自定义指令
<script> //局部自定义指令 const defineDir = { focus:{ mounted(el){ el.focus() } } } export default { directives:defineDir, SETUP(){} } </script>
一个指令定义对象可以提供如下几个钩子函数（都是可选的，根据需要引入）
created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。mounted ：绑定元素的父组件被挂载之后调用。beforeUpdate ：在更新包含组件的 VNode 之前调用。updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。beforeUnmounted ：在卸载绑定元素的父组件之前调用unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。实例3：测试指令内生命周期函数执行
<template> <div> <input type="text" v-focus v-if="show"><br> <button @click="changstatus">{{show?'隐藏':'显示'}}</button> </div> </template> //局部自定义指令 const autoFocus = { focus:{ created(){ console.LOG('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(el){ console.log('mounted'); }, beforeUpdated(){ console.log('beforeUpdated') }, updated(){ console.log('updated'); }, beforeUnmount(){ console.log('beforeUnmount'); }, unmounted(){ console.log('unmounted'); } }, } import { ref } From 'vue' export default { directives:autoFocus, setup(){ const show = ref(true) return { show, changStatus(){ show.value = !show.value } } } }
通过点击按钮，我们发现创建 input 元素的时候，会触发 created、beforeMount 和 mounted 三个钩子函数。
隐藏 input 元素的时候，会触发 beforeUnmount 和 unmounted 。
然而我们添加的 beforeUpdate 和 updated 函数并没有执行。
此时我们把 input 元素上的 v-if 修改成 v-show 就会执行上述两个方法了，具体的执行情况自行验证下。
从 vue2 升级到 vue3 ，自定义指令的生命周期钩子函数发生了改变，具体变化如下：
bind 函数被替换成了beforeMounted。update 被移除。componentUpdated 被替换成了updated。unbind 被替换成了 unmounted。inserted 被移除。钩子函数被赋予了以下参数：
el：指令所绑定的元素，可以直接操作DOM。binding：是一个对象，包含该指令的所有信息。binding 包含的属性具体的分别为：
arg 自定义指令的参数名。value 自定义指令绑定的值。oldValue 指令绑定的前一个值。dir 被执行的钩子函数modifiers：一个包含修饰符的对象。
<template>
<div>
<div v-fixed >定位</div>
</div>
</template>
<script>
//自定义指令动态参数
const autoFocus = {
fixed:{
beforeMount(el,binding){
console.log('el',el)
console.log('binding',binding)
}
}
}
export default {
directives:autoFocus,
setup(){
}
}
</script>
自定义指令的也可以带参数，参数可以是动态的，参数可以根据组件实例数据进行实时更新。
实例4：自定义指令动态参数
<template> <div> <div v-fixed:pos="posData" style="width:100px;height:100px;background:grey">定位</div> </div> </template> <script> //自定义指令动态参数 const autoFocus = { fixed:{ beforeMount(el,binding){ el.style.posITion = "fixed" el.style.left = binding.value.left+'px' el.style.top = binding.value.top + 'px' } } } export default { directives:autoFocus, setup(){ const posData = { left:20, top:200 } return { posData, } } } </script>
什么时候需要自定义指令？
到此这篇关于 vue3 自定义指令详情的文章就介绍到这了,更多相关 vue3 自定义指令内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue3 自定义指令详情全部内容，希望文章能够帮你解决vue3 自定义指令详情所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。