百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue3自定义指令详解(vue的自定义指令)

ztj100 2024-10-27 18:35 58 浏览 0 评论

vue3中自定义指令的简单案例

官方文档中给了一个很简单的示例,官方文档地址:

https://v3.cn.vuejs.org/guide/custom-directive.html

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus()
  }
})

然后给了一个使用示例:

<input v-focus />

示例非常简单,按照官方的说明写下这个案例后也能够正常运行。但实际使用肯定不止于此,我们必然会遇到需要传递参数的需求,而且官方文档后面又提到可以给自定义指令传递值和参数,并且给出了一个公式说明:

v-mydirective:[argument]="value"

这里面的argument和value可以通过钩子函数中的binding参数获取到具体就是

binding.value可以获取到自定义指令中的value,binding.arg可以获取到指令的动态参数argument。在这个地方,我犯了一个想当然的错误,举例来说:

<input v-focus[direction]="demo" />

我觉得按照官方文档上的介绍那我应该能得到binding.value是demo,binding.arg是direction,但实际我得到了两个undefined。我以为我应该是传递了两个字符串,这里其实没注意到vue的指令中我这样写实际是传递了一个需要在组件的data中定义的变量。也就是我必须在setup中定义出来这两个变量:

<script setup>
    let direction = 'right'
    let demo = 'demoStr'
</script>

这样我在自定义指令的钩子函数中就可以得到正确的结果:

app.directive('focus', {
  mounted(el, binding){
    console.log(binding.value) //这里打印出demoStr
    console.log(binding.arg)   //这里打印出right
    el.focus()
  }
 })

这里再看上面官方给的公式

v-mydirective:[argument]="value"

这里面的argument和value实际是需要你定义的两个变量,可以接受的值也是可以多种类型的,基本类型或者对象字面量都可以。

<input v-focus[12]="23" />  // binding.value是23,binding.arg是12,数字类型
<input v-focus[true]="false" /> // binding.value是false,binding.arg是true,布尔类型


<input v-focus[direction]="demo" /> //这里binding.value是{valueStr: 'demoStr'}, binding.arg是{direction:'right'}
//setup中定义对象
<script setup>
    let direction = {
        direction:'right'
    }
    let demo = {
        valueStr: 'demoStr'
    }
</script>
//这里也可以使用对象字面量,而不是setup中定义变量
<input v-focus[{direction: 'right'}]="{valueStr: 'demoStr'}" />

自定义指令在组件中使用

比如我们想在elment-plus的组件上使用自定义指令,类似下面这样:

<el-input v-focus:[direction]="pinPadding" ></el-input>

这里的el-input是element-plus提供的组件,它会被渲染成<div>包裹<input>的结构。

这个时候,自定义指令总是会被应用在组件的根节点上,这个时候我们获取input这个节点的方式就会有变化:

app.directive('focus', {
  mounted(el, binding){
    let subNode = el.getElementsByTagName('input')[0]
    subNode.focus()
  }
 })

同时官方还给出一个注意点:当被应用在一个多根节点的组件上时,指令会被忽略,并且会抛出一个警告。

相关推荐

Jquery 详细用法

1、jQuery介绍(1)jQuery是什么?是一个js框架,其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...

前端开发79条知识点汇总

1.css禁用鼠标事件2.get/post的理解和他们之间的区别http超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。HTTP的工作方式是客户机与服务器之间的请求-应答协议。...

js基础面试题92-130道题目

92.说说你对作用域链的理解参考答案:作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。...

Web前端必备基础知识点,百万网友:牛逼

1、Web中的常见攻击方式1.SQL注入------常见的安全性问题。解决方案:前端页面需要校验用户的输入数据(限制用户输入的类型、范围、格式、长度),不能只靠后端去校验用户数据。一来可以提高后端处理...

事件——《JS高级程序设计》

一、事件流1.事件流描述的是从页面中接收事件的顺序2.事件冒泡(eventbubble):事件从开始时由最具体的元素(就是嵌套最深的那个节点)开始,逐级向上传播到较为不具体的节点(就是Docu...

前端开发中79条不可忽视的知识点汇总

过往一些不足的地方,通过博客,好好总结一下。1.css禁用鼠标事件...

Chrome 开发工具之Network

经常会听到比如"为什么我的js代码没执行啊?","我明明发送了请求,为什么反应?","我这个网站怎么加载的这么慢?"这类的问题,那么问题既然存在,就需要去解决它,需要解决它,首先我们得找对导致问题的原...

轻量级 React.js 虚拟美化滚动条组件RScroll

前几天有给大家分享一个Vue自定义滚动条组件VScroll。今天再分享一个最新开发的ReactPC端模拟滚动条组件RScroll。...

一文解读JavaScript事件对象和表单对象

前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScrip...

Python函数参数黑科技:*args与**kwargs深度解析

90%的Python程序员不知道,可变参数设计竟能决定函数的灵活性和扩展性!掌握这些技巧,让你的函数适应任何场景!一、函数参数设计的三大进阶技巧...

深入理解Python3密码学:详解PyCrypto库加密、解密与数字签名

在现代计算领域,信息安全逐渐成为焦点话题。密码学,作为信息保护的关键技术之一,允许我们加密(保密)和解密(解密)数据。...

阿里Nacos惊爆安全漏洞,火速升级!(附修复建议)

前言好,我是threedr3am,我发现nacos最新版本1.4.1对于User-Agent绕过安全漏洞的serverIdentitykey-value修复机制,依然存在绕过问题,在nacos开启了...

Python模块:zoneinfo时区支持详解

一、知识导图二、知识讲解(一)zoneinfo模块概述...

Golang开发的一些注意事项(一)

1.channel关闭后读的问题当channel关闭之后再去读取它,虽然不会引发panic,但会直接得到零值,而且ok的值为false。packagemainimport"...

Python鼠标与键盘自动化指南:从入门到进阶——键盘篇

`pynput`是一个用于控制和监控鼠标和键盘的Python库...

取消回复欢迎 发表评论: