Vue의 부모 구성 요소 $ emit에 하나 이상의 매개 변수를 전달하는 방법 요약

1. 하나의 매개 변수

하위 구성 요소가 매개 변수를 상위 구성 요소에 전달할 때 두 가지 주요 방법이 있습니다.

//子组件
this.$emit('itemClick',item)

방법 1 : 괄호 없음

//父组件 
<div id="app">
   <Child @itemClick="handleItemClick"/>
 </div>

methods:{
    handleItemClick(item){
     console.log(item)
    }
  }

보시다시피 상위 구성 요소의 이벤트 처리 기능이 괄호로 묶이지 않으면 하위 구성 요소가 전달한 값이 첫 번째 매개 변수로이 함수에 전달됩니다. 

방법 2 : $ event를 사용하여 받기  

//父组件 
<div id="app">
   <Child @itemClick="handleItemClick($event)"/>
 </div>

//以下不变
methods:{
    handleItemClick(item){
     console.log(item)
    }
  }

2. 여러 매개 변수  

자식 구성 요소가 여러 매개 변수를 부모 구성 요소에 전달할 때 부모 구성 요소가 매개 변수를 받으면 인수가 배열 형식으로 전달됩니다.

//子组件
this.$emit('itemClick',param1,param2)

//父组件 
<div id="app">
   <Child @itemClick="handleItemClick(arguments)"/>
</div>

  methods:{
    handleItemClick(params){
      console.log(params)
      console.log(params[0])
      console.log(params[1])
    }
  }

결과는 다음과 같습니다.