如下:父组件中通过列表渲染维护一个购买列表,这个购买列表能接受子组件的删除和购买事件,子组件中删除会返回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]数组的形式进行了传递。