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>
1

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

方式二：利用动态参数

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

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

　　动态参数文档

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

# 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);
	    },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

　　需要注意的是，利用动态参数时，handleFunc 只能接收一个参数，因为指令的参数只能传一个。如果需要接收多个参数，可以像上例一样，传个对象进去，然后在处理函数中采用解构语法接收参数。