vue2实现directive自定义指令的封装与全局注册流程
更新时间：2023年02月27日 11:45:21 作者：初映CY的前说
自定义指令是对普通DOM元素进行的底层操作,它是一种有效的的补充和扩展,不仅可以用于定义任何的dom操作,并且是可以复用的,下面这篇文章主要给大家介绍了关于vue2实现directive自定义指令的封装与全局注册流程的相关资料,需要的朋友可以参考下
前言
我们在使用vue框架的时候，指令基本能够覆盖我们平常的工作。可难免我们根据业务需求走总有的指令无法一步到达我们想要的结果。这个时候我们就可以自己动手手动封装来制作一个指令用于完成我们的设计。
一、directive自定义指令介绍
1.概念：
除了 Vue 内置的一系列指令 (比如v-model或者v-show等众多指令 之外，Vue 还允许你注册自定义的指令 (Custom Directives)
2.作用：
丰富我们指令的功能，使我们组件具有原生指令不具备的功能作用
3.使用：
使用Vue.directive('自定义指令名'，{对象中写方法})，随后v-自定义指令名使用（见下）
二、全局注册使用流程
1.准备好我们需要的自定义指令
创建一个单独的文件夹来存储我们的自定义指令
比如博主的路径：src/dynamic/index.js
export const focus = {
inserted: function(dom, options) {
console.log(dom, 'dom')// dom相当于$refs
console.log(options, 'options')// 相当于该属性，我们的值可以从这获取
dom.focus()
}
}我们查看我们的dom与options打印出来的是什么
可以得知：dom是当前的标签，我们的options为我们自定义指令的属性方法等
2.开始在main中导入该文件完成注册功能
main.js中完成导入
// 使用循环注册的方式
import * as directives from '@/directives'
// 开始遍历注册
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
console.log(Object.keys(directives), 'Object.keys(directives)')
console.log(directives, 'directives')// 这玩意是一个对象控制台查看我们导入的directives是什么，发现是一个对象
3.完成了注册功能开始使用
自定义指令<input v-focus="'看看我传递的位置是传递到哪里去了'" type="text">
可以看到我们传递给组件的值用 =" (数据)" 进行传递，我们通过打印options.value可以获取我们传递进来的数据
效果查看：当我们刷新页面后进入直接是触发了focus()方法
注意点：
- 导入时候 * 是通配符表示全部 as为取别名
- 使用方法为v-focus,切记加上v-进行使用
- Object.keys()获取的是对象的键产生的数据用数组包裹起来，forEach()用于遍历数组
- 值的传递使用value可以获取
总结
到此这篇关于vue2实现directive自定义指令的封装与全局注册流程的文章就介绍到这了,更多相关vue2 directive自定义指令封装与全局注册内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解vue-router数据加载与缓存使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本篇文章主要介绍了Vue2.0组件间数据传递示例，组件间数据传递主要是父子组件之间传递，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
这篇文章主要为大家详细介绍了vue实现打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
本文主要介绍了Element el-upload上传组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
Vue3 提供了两个新的 API：ref 和 reactive，它们可以帮助我们更好地管理和处理响应式数据，这篇文章主要介绍了vue3中的ref与reactive的区别和使用方法,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue 如何删除数组中的某一条数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了浅谈vue首次渲染全过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动，这篇文章简单介绍下Vue中computed和watch的区别异同，感兴趣的朋友一起看看吧2022-12-12
解决vue中监听input只能输入数字及英文或者其他情况的问题
今天小编就为大家分享一篇解决vue中监听input只能输入数字及英文或者其他情况的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue.js中如何导出Excel表格,在项目中经常会遇到这样的需求，今天小编分步骤通过实例代码给大家详细介绍，需要的朋友可以参考下2019-06-06
最新评论