我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue在自定义指令绑定的处理函数中传递参数

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue在自定义指令绑定的处理函数中传递参数

在自定义指令绑定的处理函数中传递参数

需求背景

现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 v-on="handleFunc(arg1, arg2)"。

Vue 的指令预期得到的值是一个 JavaScript 表达式,除了 v-on 和 v-for 这两个特殊指令外,其他的指令会自动计算该表达式的值,将最终的计算结果传递给指令。

所以自定义的指令不能用 v-mydirective="handleFunc(arg1, arg2)" 的形式绑定函数值,因为 handleFunc(arg1, arg2) 作为一个 JavaScript 表达式会被立即执行,最终会将其返回值传递给指令。

那么当我们想要为自定义指令绑定函数值,又想为其传递参数该怎么办呢?

方式一:包装函数

利用指令的值预期得到一个 JavaScript 表达式的特性,可以为其值绑定一个包装后的函数,从而实现传递参数的目的。如下

<div v-mydirective="() => {handleFunc(arg1, arg2)}"><div>

在上面的示例中,v- mydirective 指令的值是一个字面量的箭头函数,该函数并不会立即执行,因为表达式中只是函数的声明,并没有调用。利用这种形式,就可以为自定义指令绑定函数值,并可以向函数中传递参数。

方式二:利用动态参数

Vue 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数,如下

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

利用动态参数,也可以向指令中传递其绑定的函数所需要的参数,如下

# template
<div v-mydirective:[funcArg]="handleFunc"><div>

# script
export default {
    directives: {
        mydirective: {
            bind(el, binding, vnode) {
                let {expression, arg} = binding;
                if (expression && vnode.context[expression]) {
                    vnode.context[expression](arg);
                } else {
                    binding.value(arg)
                }
            },
        }
    },
    data() {
        return {
            funcArg: {
                a: 1,
                b: 2,
                c: 3
            },
        }
    },
    methods: {
        handleFunc({a, b , c}) {
            console.log(a, b, c);
        },
    }
}

需要注意的是,利用动态参数时,handleFunc 只能接收一个参数,因为指令的参数只能传一个。

如果需要接收多个参数,可以像上例一样,传个对象进去,然后在处理函数中采用解构语法接收参数。

在自定义指令中的传递参数时value和expression的区别

在使用Vue的自定义指令的时候,有时候会在调用binding的value的值的时候会发现值显示未定义,但是我们确实传递了参数,在查看打印出来的参数的时候会发现参数出现在了expression对应的值中,而不是value,所以这时候这两个参数的区别就很有必要探究一下

首先做一个简单的案例来测试一下,在我们传递一个参数的时候,这两个参数的具体作用和现实的内容:

代码实现:

<template>
<div>
  <p v-color="color">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

在上面的案例中,我们定义了一个自定义指令,指令的名字叫做color,并传递了一个参数,参数是Vue组件中的data节点中的变量,我们打印了两个形参,一个是挂载的对象,一个是用来接收参数的binding,下面我们来看看value和expression中对应的值是什么

显示效果:

可以看到在expression中的值是color,而在value中存储的值是red,那么我们就可以知道,expression中存储的是我们传递给指令的参数的原本的内容,是一个表达式,而value中的值才是我们真正需要的,这是在传递了一个变量的情况,那如果我们直接传递一个固定的值作为参数的时候是什么样的结果呢?

代码实现:

<template>
<div>
  <p v-color="red">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

显示效果:

可以看到,在我们传递了一个data节点中不存在的值的时候,首先会报错,这个洋文报错的大致意思是作为参数传递的这个变量没有定义就被使用了,而且在组件中没有这个变量的其它形式的定义。

意思就是我们明明传递了一个值,但是Vue仍然将其作为一个表达式的形式来解析了,而且可以看到expression中的值是我们传递进去的参数的名字,而value中却没有参数,就导致了我们明明传递了参数而value中没有任何参数的问题,那么如果我们想要传递一个字面值,而不是作为表达式的形式被解析的时候需要怎么做呢?

很简单,当我们想要传递一个字面值,而希望Vue不要以表达式的形式去解析的时候,用单引号将值包裹起来就可以作为一个字符串的字面值的形式进行解析了。

代码实现:

<template>
<div>
  <p v-color="'red'">你好世界</p>
</div>
</template>
 
<script>
export default {
  name: "Demo_d",
  directives:{
    color:{
      bind(el,binding){
        console.log(el)
        console.log(binding)
      }
    }
  },
  data(){
    return {
      color:'red'
    }
  }
}
</script>
 
<style scoped>
 
</style>

显示效果:

可以看到,在我们将传递的值用单引号进行包含之后,报错消失了,并且expression中的值是我们传递进去的带有单引号的参数,在value中的参数是我们真正需要的字面值 

注意点

在传递参数的时候,如果不加单引号,Vue会将其以表达式的方式进行解析,会进行运算或在data节点中寻找变量的值,如果没有对应的变量值就会报错,且value中没有对应的数据。

如果想要将参数作为普通的字符串进行解析的时候,就需要将参数使用单引号进行包裹,就可以作为一个普通的字符串字面值进行解析

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue在自定义指令绑定的处理函数中传递参数

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue在自定义指令绑定的处理函数中传递参数

这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-03-10

Vue怎么在自定义指令绑定的处理函数中传递参数

这篇文章主要介绍“Vue怎么在自定义指令绑定的处理函数中传递参数”,在日常操作中,相信很多人在Vue怎么在自定义指令绑定的处理函数中传递参数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么在自定义指令
2023-07-05

Vue实现带参数的自定义指令示例

这篇文章主要为大家介绍了Vue实现带参数的自定义指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-11

vue3+TS实现自定义指令长按触发绑定的函数

这篇文章主要介绍了vue3+TS实现自定义指令长按触发绑定的函数,文中给大家分享了编写自定义指令时遇到的几个难点,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-12-29

golang自定义函数实现中的异常处理

在 go 中处理自定义函数异常有 3 种方法:使用 panic 内置函数(语法见文章)实战案例:define divide 函数,当除数为 0 时 panic优点:方便、可自定义错误消息、可在不同函数级别处理错误缺点:破坏程序流程、调试困难
golang自定义函数实现中的异常处理
2024-04-28

vue自定义指令directives及其常用钩子函数的示例分析

这篇文章主要为大家分析了vue自定义指令directives及其常用钩子函数的示例分析的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“vue自定义指令dire
2023-06-28

PHP扩展开发:如何使用预处理器指令控制自定义函数的编译?

php 扩展中,预处理器指令可控制自定义函数的编译。使用 #ifdef 检查宏是否已定义。使用 #ifndef 检查宏是否未定义。使用 #define 定义宏。使用 #undef 取消定义宏。PHP 扩展开发:使用预处理器指令控制自定义函数
PHP扩展开发:如何使用预处理器指令控制自定义函数的编译?
2024-05-15

如何使用异常处理程序处理自定义 PHP 函数中的错误?

使用异常处理程序处理自定义 php 函数中的错误可以提高代码的可维护性。步骤如下:定义抛出异常的自定义函数。使用 set_exception_handler() 注册异常处理程序。使用 try-catch 块调用函数并捕获错误。实战案例演示
如何使用异常处理程序处理自定义 PHP 函数中的错误?
2024-04-22

PHP 函数中的错误处理是如何工作的?如何自定义错误处理?

php 函数的错误处理机制允许开发者定义如何处理错误和异常。默认情况下,错误信息将记录到日志并显示在标准错误输出中,但开发者可以使用 set_error_handler() 函数自定义错误处理。可以通过设置一个回调函数来自定义错误处理,该回
PHP 函数中的错误处理是如何工作的?如何自定义错误处理?
2024-04-16

如何确定作为函数参数传递的指针是否正在被修改,或者副本是否正在被修改?

问题内容package mainimport ("fmt")type Numbers struct {x inty int}func initial(number *Numbers) {number.x = 1number.y = 1
如何确定作为函数参数传递的指针是否正在被修改,或者副本是否正在被修改?
2024-02-06

使用Postman如何在接口测试前将请求的参数进行自定义处理

Postman 有一个 Pre-request Script 功能,即在接口请求前测试人员可自定义编写函数等对请求参数进行处理,本篇将举例来介绍这个功能。

深入理解Go语言文档中的flag.Usage函数自定义命令行帮助信息

深入理解Go语言文档中的flag.Usage函数自定义命令行帮助信息在Go语言中,我们经常会使用flag包来处理命令行参数。flag包提供了一种方便的方式来解析和处理命令行参数,让我们的程序可以接受用户输入的不同选项和参数。在flag包中,
深入理解Go语言文档中的flag.Usage函数自定义命令行帮助信息
2023-11-04

Python如何规定当解析器在 XML 文档中找到处理指令时所调用的函数

Python提供了用于处理XML文档中处理指令的函数。默认情况下,processingInstruction()函数在解析器遇到处理指令时被调用。processingInstruction()接收两个参数:目标(指令名称)和数据。开发者可以通过重写ContentHandler类的processingInstruction()方法来自定义处理方式。此外,getxml:content()方法可以检索处理指令的内容。对于高级处理,setEntityResolver()方法允许指定自定义实体解析器来处理处理指令。
Python如何规定当解析器在 XML 文档中找到处理指令时所调用的函数
2024-04-02

PHP如何规定当解析器在 XML 文档中找到处理指令时所调用的函数

本文解析PHP如何指定处理指令的对应函数。当解析到外部实体时,调用xml_set_external_entity_resolver函数指定外部实体的文件名。内部实体则根据名称调用不同函数,如xml-stylesheet调用xml_set_stylesheet_processing函数。其他处理指令可通过xml_set_processing_instruction_handler函数指定回调函数,此函数接收处理指令名称和值。回调函数遵循特定签名,若涉及处理指令嵌套,需留意处理指令名称和值均为字符串,且PHP
PHP如何规定当解析器在 XML 文档中找到处理指令时所调用的函数
2024-04-02

Java如何规定当解析器在 XML 文档中找到处理指令时所调用的函数

Java处理XML处理指令的机制Java解析器在遇到XML文档中的处理指令时,会调用特定函数。当解析器找到处理指令的开始标签时,它会调用startProcessingInstruction方法。如果指令包含内容,则将其作为参数传递给该方法。解析器还会调用endProcessingInstruction方法来处理指令的结束标签。如果没有注册特定目标名称的处理程序,解析器将使用默认处理程序。遵循最佳实践,谨慎使用处理指令,明确定义目标名称,并考虑使用XML模式进行验证。妥善处理处理指令的内容,以维护文档结构和
Java如何规定当解析器在 XML 文档中找到处理指令时所调用的函数
2024-04-02

Java如何使用用户自定义函数对数组中的每个元素做回调处理

Java中使用用户自定义函数对数组元素进行回调处理的步骤如下:定义用户自定义函数;创建数组;使用StreamAPI,通过lambda表达式或方法引用传递自定义函数;理解映射操作,将函数应用于每个元素。优势:可重用性:函数可重复使用,执行同一操作;灵活:自定义函数可定义特定操作;简洁:语法简洁;并行处理:提升大数组处理效率。
Java如何使用用户自定义函数对数组中的每个元素做回调处理
2024-04-02

PHP如何使用用户自定义函数对数组中的每个元素做回调处理

PHP中使用用户自定义函数对数组元素执行回调可利用array_map()函数。回调函数作为参数传递,执行特定操作,常用于类型转换、字符串处理、数组元素过滤、数学运算或创建新数组。该函数可同时处理多个数组,通过闭包或匿名函数传递更复杂的逻辑。array_map()简化了对数组每个元素进行自定义操作的任务,提供广泛的处理可能性。
PHP如何使用用户自定义函数对数组中的每个元素做回调处理
2024-04-02

Go语言如何规定当解析器在 XML 文档中找到处理指令时所调用的函数

Go语言提供xml.Handler接口处理XML事件,当解析器在XML文档中遇到处理指令时,它会调用ProcessingInstruction方法,接收处理指令名称和参数。您可以实现xml.Handler接口并重写ProcessingInstruction方法来自定义处理指令的处理。例如,您可以解析XML文档中的样式表处理指令并加载指定的样式表。通过实现自己的xml.Handler,您可以自定义处理XML处理指令的方式,为Go程序添加灵活性和可定制性。
Go语言如何规定当解析器在 XML 文档中找到处理指令时所调用的函数
2024-04-02

C语言如何规定当解析器在 XML 文档中找到处理指令时所调用的函数

本文介绍了C语言中如何使用函数处理XML文档中的处理指令。当解析器遇到处理指令时,会调用XML处理指令函数规范中的函数。这些函数处理指令的开始和结束,以及指令的内容。步骤包括注册函数、解析XML文档和处理指令。示例代码展示了如何使用这些函数。应用程序包括自定义XML验证、处理DTD和XML转换。
C语言如何规定当解析器在 XML 文档中找到处理指令时所调用的函数
2024-04-02

编程热搜

目录