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

6022 단어 vue
  • 子組件不傳任何參數

  • // child
    this.$emit('push')
    
    // parent
    @push='handlePush'
    
    handlePush(){
    
    }
    


  • 子組件傳一個參數

  • // child
    this.$emit('push', 1000)
    
    // parent
    @push='handlePush'
    
    handlePush(param){
        console.log(param) // 1000
    }
    


  • 子組件傳多個參數,父組件接收需要사용 arguments

  • // child
    this.$emit('push', 1000, 500)
    
    // parent
    @push='handlePush(arguments)'
    
    handlePush(params){
        console.log(params[0]) // 1000
        console.log(params[1]) // 500
    }
    


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

  • // child
    this.$emit('push', 1000)
    
    // parent
    @push='handlePush($event, '小美')'
    
    handlePush(param, name){
        console.log(param) // 1000
        console.log(name) // 小美
    }
    


  • 子組件傳多個參數,父組件接收參數時還加上自己的一個參數,那麼父組件需要使用 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
  • 좋은 웹페이지 즐겨찾기