VUE3.0 父子组件传值,但是父组件的接收事件中需要传形参

421 阅读1分钟

正常的父子组件传值就不说了,网上的教程大把。这里只说一下,如果父组件接收子组件的事件中需要传形参的情况

尤大神说的这个方法可以试试github.com/vuejs/vue/i…,这里我就不贴出来了

接下来进入正题:

<datePicker :date='item.value' :show='item.itemShowPicker' :isCheckBox='true' @getExpiryDate="onExpiryDate($event, item)"></datePicker>

datePicker是父子间调用的子组件,getExpiryDate是子组件暴露出来的方法,注意看onExpiryDate事件,用了一个$event来代替子组件的传值,后面的item则是父组件自己的形参。

特别注意这里的$event能接收且只能接收子组件传递的第一个参数

如果子组件实在有多个参数要传递,那可以考虑父组件接收时,先用一个箭头函数,看下面例子

子组件:

content.emit('getExpiryDate', 'aaa', 'bbb')

父组件:

<datePicker :date='item.value' :show='item.itemShowPicker' :isCheckBox='true' @getExpiryDate="(childParams1, childParams2) => onExpiryDate(childParams1, childParams2, item)"></datePicker>

let onExpiryDate = (childParams1, childParams2, item) => {}

childParams1,childParams2为子组件传递出来的参数,item依旧是父组件自己的形参