VueJS - 傳遞函數名稱和調用之間的區別

Question

假設我們有一個帶有@click的元素。傳遞給它的名稱和使用它的調用之間有什麼真正的區別，因爲這兩種方式都起作用。它是否爲呼叫創建了另一個抽象層？有一種方法是優先的嗎？

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

Answer 1

如果使用其名稱，Event對象將傳遞給函數。如果您需要查看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, …} 

如果引用完整函數調用，則顯式聲明傳遞給函數的內容。

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

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

output: 
undefined 

再或者用什麼定義：

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

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

output: 
foo