demand background
Now you need to bind the function for the custom instruction, and you need to pass parameters to the function, similar v-on="handleFunc(arg1, arg2)".
The expected value of the Vue instruction is a JavaScript expression. Except for the two special instructions v-on and v-for, other instructions will automatically calculate the value of the expression and pass the final calculation result to the instruction. Therefore, custom directives cannot v-mydirective="handleFunc(arg1, arg2)"bind function values in the form of , because handleFunc(arg1, arg2)as a JavaScript expression, it will be executed immediately, and its return value will eventually be passed to the directive.
So what should we do when we want to bind a function value to a custom directive and want to pass parameters to it?
Method 1: wrapper function
Using the property that the value of the instruction is expected to obtain a JavaScript expression, a wrapped function can be bound to its value, so as to achieve the purpose of passing parameters. as follows
<div v-mydirective="() => {handleFunc(arg1, arg2)}"><div>
In the above example, v- mydirectivethe value of the instruction is a literal arrow function, which will not be executed immediately, because the expression is only a function declaration, not a call. Using this form, you can bind function values to custom directives and pass parameters to functions.
Method 2: Using dynamic parameters
Starting from Vue 2.6.0, JavaScript expressions enclosed in square brackets can be used as parameters of a command, as follows
<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
Dynamic Parameters Documentation
Using dynamic parameters, you can also pass the parameters required by the bound function to the command, as follows
# 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);
},
}
}
It should be noted that when using dynamic parameters, handleFunconly one parameter can be received, because only one parameter of the command can be passed. If you need to receive multiple parameters, you can pass an object in as in the above example, and then use the destructuring syntax to receive parameters in the processing function.