Vue中的方法傳遞event非常常見,尤其是在處理表單事件或者子組件往父組件傳遞數據的時候。Vue中的事件實際上就是一個普通的JavaScript事件,可以通過$event對象來獲取事件信息。在Vue的模板語法中,通過在方法定義中傳遞$event參數,可以將事件對象傳遞給函數。
//子組件中傳遞事件//父組件中接收事件
在上面的代碼中,我們可以看到在子組件中通過this.$emit()方法觸發了一個自定義事件。在父組件中通過綁定@myEvent來監聽這個事件,并在處理函數中接收到了event參數。event參數就是$event對象,我們可以通過event.target來獲取觸發事件的元素,通過event.type來獲取觸發事件的類型等等。
除了在自定義事件中傳遞event對象外,在Vue中我們也可以在模板語法內直接傳遞$event對象到方法中。代碼如下:
//子組件模板
這個例子和之前的例子唯一的區別就在于我們將$event對象作為參數傳遞給了onClick()方法。在Vue的模板語法中,$event是一個特殊的變量,它表示當前觸發的事件對象。在onClick()方法內部,我們可以直接使用$event來獲取事件信息。
總結一下,在Vue中我們可以通過在方法中傳遞$event參數來獲取事件對象,也可以在模板語法中直接使用$event變量來獲取到事件對象。這些能力非常有用,尤其在處理表單事件和子組件向父組件傳遞值的場景中。