Vue $emit 傳遞參數的各種情況

1. 子組件不傳任何參數

// child
this.$emit('push')

// parent
@push='handlePush'

handlePush(){

}

1. 子組件傳一個參數

// child
this.$emit('push', 1000)

// parent
@push='handlePush'

handlePush(param){
    console.log(param) // 1000
}

1. 子組件傳多個參數，父組件接收需要使用arguments

// child
this.$emit('push', 1000, 500)

// parent
@push='handlePush(arguments)'

handlePush(params){
    console.log(params[0]) // 1000
    console.log(params[1]) // 500
}

1. 子組件傳一個參數，父組件接收參數時還加上自己的一個參數，那麼父組件需要使用$event

// child
this.$emit('push', 1000)

// parent
@push='handlePush($event, '小美')'

handlePush(param, name){
    console.log(param) // 1000
    console.log(name) // 小美
}

1. 子組件傳多個參數，父組件接收參數時還加上自己的一個參數，那麼父組件需要使用arguments

// child
this.$emit('push', 1000, 500)

// parent
@push='handlePush(arguments, '小美')'

handlePush(params, name){
    console.log(params[0]) // 1000
    console.log(params[1]) // 500
    console.log(name) // 小美
}

結論

• 如果子組件傳遞單個參數且父組件自己帶一個參數，則父組件需要使用名為$event的參數

• 如果子組件傳遞多個參數，則父組件需要使用名為arguments的參數