父组件调用子组件自定义事件的同时增加自定义参数

问题描述

通常,在写组件的时候,会在组件里用 $emit 方法携带参数传出组件的自定义事件,比如这样

1
2
// 子组件
this.$emit('test', this.param)
1
2
<!-- 父组件 -->
<Component @test="test"></Component>

但是会碰到这样一个需求,就是在父组件调用子组件自定义事件的同时,还需要传入其它的参数。

这时候如果直接带上自定义的参数,就无法接收到子组件传出参数,那有什么办法可以同时都接收到呢?

解决办法

翻遍 Vue 的文档也没看到对这块有说明,不过最后还是找到了方法了,就是通过 $event ,看下面的具体使用吧。

1
2
// 子组件
this.$emit('test', this.param)
1
2
<!-- 父组件 -->
<Component @test="test($event, other)"></Component>

可以看到, other 就是附加的自定义参数,通过这样的写法,就可以同时接收子组件传出的参数和自定义的参数。

问题又来了,如果子组件里传出的是多个参数应该怎么办?

这时候只要把 $event 替换成 arguments 就可以了。

1
2
// 子组件
this.$emit('test', this.param1, this.param2, this.param3)
1
2
<!-- 父组件 -->
<Component @test="test(arguments, other)"></Component>

参考链接

自定义事件传参问题