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

目录
  • 在自定义指令绑定的处理函数中传递参数
    • 需求背景
    • 方式一:包装函数
    • 方式二:利用动态参数
  • 在自定义指令中的传递参数时value和expression的区别
    • 注意点
  • 总结

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

需求背景

现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 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中没有对应的数据。

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

总结

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

(0)

相关推荐

  • Vue自定义指令封装节流函数的方法示例

    节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

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

    正文 自定义指令参考官方文档:vuejs.bootcss.com/guide/custo… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &

  • 详解Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面

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

    目录 在自定义指令绑定的处理函数中传递参数 需求背景 方式一:包装函数 方式二:利用动态参数 在自定义指令中的传递参数时value和expression的区别 注意点 总结 在自定义指令绑定的处理函数中传递参数 需求背景 现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 v-on="handleFunc(arg1, arg2)". Vue 的指令预期得到的值是一个 JavaScript 表达式,除了 v-on 和 v-for 这两个特殊指令外,其他的指令会自动计算该表达式的

  • Vue 3自定义指令开发的相关总结

    什么是指令(directive) 在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为"指令". 在计算机技术中,指令是由指令集架构定义的单个的CPU操作.在更广泛的意义上,"指令"可以是任何可执行程序的元素的表述,例如字节码. 那么在前端框架Vue中"指令"到底是什么,他有什么作用呢? 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字,这些关键字就是Vue框架内置的指令

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • vue 使用自定义指令实现表单校验的方法

    笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,

  • vue使用自定义指令实现按钮权限展示功能

    目录 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 三.编写自定义指令 四.使用 一.在src下新建directive文件夹 二.定义index.js文件,在vue上注入自定义指令 import hasBtn from './permission/hasBtn' const install = function (Vue) { Vue.directive('hasBtn', hasBtn) } if (window.Vue) { window

  • Vue.js自定义指令的用法与实例解析

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • AngularJs1.x自定义指令独立作用域的函数传入参数方法

    在定义指令的scope属性如果设置成了{},那就成为了一个独立作用域,如果要传入一个方法,使用&,但是这里的传参有点不一样. 先看下官网解释: & or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as

  • Vue使用自定义指令实现拖拽行为实例分析

    本文实例讲述了Vue使用自定义指令实现拖拽行为.分享给大家供大家参考,具体如下: 需求 通过自定义指令的方式实现拖拽效果,预期的使用方式为: <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div> 更重要的一个需求点: 拖拽元素内部的子元素可以自行阻止拖拽行为 比如: <div style="background: #f00; width: 2

随机推荐