VueJS - Différence entre le nom de la fonction de passage et l'appel

Question

Disons que nous avons un élément avec @click. Quelle est la vraie différence entre passer à la fonction par son nom et utiliser son appel puisque les deux façons fonctionnent. Est-ce que cela crée un autre niveau d'abstraction sous le niveau de l'appel? Est-ce qu'un moyen est préféré?

<element @click="functionName"></element> 
<element @click="functionName()"></element> 

Answer 1

Si vous utilisez son nom, l'objet Event est transmis à la fonction. Ceci est utile si vous avez besoin d'accéder à event.target.

<element @click="functionName"></element> 

functionName(x){ 
    console.log(x) 
} 

output (example as it'll change based on the event): 
MouseEvent {isTrusted: true, screenX: 494, screenY: 88, clientX: 494, clientY: 22, …} 

Si vous faites référence à l'appel de fonction complet, vous déclarez explicitement ce qui est transmis à la fonction.

<element @click="functionName()"></element> 

functionName(x){ 
    console.log(x) 
} 

output: 
undefined 

Ou encore quelque chose défini:

<element @click="functionName('foo')"></element> 

functionName(x){ 
    console.log(x) 
} 

output: 
foo