Summary of the method of passing one or more parameters to the parent component $emit in Vue

1. One parameter

There are two main methods when the child component passes a parameter to the parent component

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

Method 1: No parentheses

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

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

As you can see, if the parent component’s event processing function is not parenthesized, the value passed by the child component will be passed to this function as the first parameter 

Method 2: Use $event to receive  

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

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

2. Multiple parameters  

When the child component passes multiple parameters to the parent component, the parent component uses arguments to pass in the form of an array when receiving

//子组件
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])
    }
  }

The results are as follows: