1. 一个参数
子组件向父组件传递一个参数时主要有以下两种方法
//子组件
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)
}
}
2. 多个参数
子组件向父组件传递多个参数时,父组件接收时采用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])
}
}
结果如下: