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

发表于 2019-05-23 更新于 2019-10-08 分类于 Vue 相关阅读次数：

本文字数： 732 阅读时长 ≈ 1 分钟

问题描述

通常，在写组件的时候，会在组件里用 $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>