[vue]父组件中如何处理带参数的子组件广播事件,同时加入自己的参数

如下:父组件中通过列表渲染维护一个购买列表,这个购买列表能接受子组件的删除和购买事件,子组件中删除会返回delList事件,购买按钮由于实现了复用,会返回onpay事件,同时会返回代表付款、收货、发货、确认、评价的时间变量whichTime。

父组件中:
<dd v-for="(list, idx) in curLists" :key="idx">
    <PayList
        @delList="onDelList(list, idx)"
        @onpay="onpay(list,idx, arguments)"
    />
</dd>

onDelList(list, idx) {
  
},
onpay() {
    let [list,idx, [whichTime]] = arguments;
}

子组件中:
 ondel() {
    this.$emit('delList');
},
 onpay(whichTime) {
    this.$emit('onpay', whichTime);
},

不带参数的子组件广播

这里父组件中onDelList是常规写法,监听到事件之后,在循环列表中拿到list和idx,然后在curLists删除自己。

带参数的子组件广播

onpay是特殊用法,子组件onpay中返回了参数值whichTime,而在父组件onpay中不仅要接收whichTime还要加入自身的list和idx参数,他的处理方法是首先在父组件中使用arguments来接收子组件中的所有参数@onpay="onpay(list,idx, arguments)"
然后在函数中使用let [list,idx, [whichTime]] = arguments;对arguments进行解构,我们看到子组件中传入的参数在这里以 [whichTime]数组的形式进行了传递。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容