Vue中子组件向父组件$emit传递一个和多个参数方法总结

一个参数

子组件向父组件传递一个参数时主要有以下两种方法

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

方法一：不加括号

//父组件 
<div id="app">
   <Child @itemClick="handleItemClick"/>
 </div>
 
methods:{
    handleItemClick(item){
     console.log(item)
    }
  }

可以看到，如果父组件的事件处理函数不加括号，那么子组件传递过来的值将会作为第一个参数传入这个函数

方法二：使用$event接收

//父组件 
<div id="app">
   <Child @itemClick="handleItemClick($event)"/>
 </div>
 
//以下不变
methods:{
    handleItemClick(item){
     console.log(item)
    }
  }

多个参数

子组件向父组件传递多个参数时，父组件接收时采用arguments 以数组的形式传入

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

转载

Vue中子组件向父组件$emit传递一个和多个参数方法总结