Vue: 自定义事件传参问题

[yuu2lee4]

What problem does this feature solve?

在组件内部发射的事件并且有参数传递出来的时候，如果在业务调用该组件，并监听该事件时，需要在组件外面传参进来的时候，就会覆盖组件内部传递出来的参数，就像文档事件处理器一节所讲的原生事件监听，如果自己传了参数，就会覆盖掉默认的event对象参数一样，必须要显示地传入$event，很神奇的是，在自定义事件这里，也可以传入$event来获取到组件内部传递出来的第一个参数，这个文档里并没有写到，而且从这个$event命名来看，应该是一个不小心疏忽的'礼物'，但是就算有这个‘bug’存在，第二个参数，第三个参数都是无法获取的，目前的解决方法就是都放在第一个参数里面，我希望能在外面对所有参数都能显式地去使用。

What does the proposed API look like?

Parent component:
html <child v-for="(item, index) in data" @custom="parentMethod(index, $1, $2)"></child>
Child component:
javascript //someWhere emit a custom event ...... this.$emit('custom', arg1, arg2); ......

这里parentMethod传入了index，$1和$2对应子组件里的arg1和arg2，在parentMethod这里，顺序不重要，并且$1和$2不是必传的，看需求。
为了清楚地表达我的意思，使用了中文，不好意思。

[javoski]

我想对于自定义事件，你并不需要考虑$event的问题。

很神奇的是，在自定义事件这里，也可以传入$event来获取到组件内部传递出来的第一个参数，这个文档里并没有写到

这里跟native事件的$event应该没什么关系，而是你的第一个参数命名就是$event，那它表示第一个参数也没毛病。

[yuu2lee4]

@javoski
从命名上来看，显然是一个‘疏忽’，这不是个什么大问题，现在的问题是在有更多参数的时候，取不到其它的参数

[yyx990803]

用 arguments 就可以了
On Tue, May 23, 2017 at 4:15 PM yuri [e-mail] wrote:

@javoski https://github.com/javoski
从命名上来看，显然是一个‘疏忽’，这不是个什么大问题，现在的问题是在有更多参数的时候，取不到其它的参数

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5735#issuecomment-303324509, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXmb137fTJYSITRLrBtECAOHUGseuks5r8pWLgaJpZM4NjQGx
.

[yuu2lee4]

@yyx990803
犹大，arguments在父组件不传参的时候，是可以的，但是父组件传入自己的参数，或者跟括号不传参数，arguments是空的

[yyx990803]

请给重现
On Tue, May 23, 2017 at 8:41 PM yuri [e-mail] wrote:

@yyx990803 https://github.com/yyx990803
犹大，arguments在父组件不传参的时候，是可以的，但是父组件传入自己的参数，或者跟括号不传参数，arguments是空的

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5735#issuecomment-303385188, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXurz2ii1F0Tnmg-shBZpiV5puSflks5r8tPtgaJpZM4NjQGx
.

[yuu2lee4]

@yyx990803
http://jsbin.com/semitag/edit?html,js,output
打开控制台，可以看到一个数组有值，一个是空的

[yyx990803]

... test2(arguments)
On Tue, May 23, 2017 at 10:20 PM yuri [e-mail] wrote:

@yyx990803 https://github.com/yyx990803
http://jsbin.com/semitag/edit?html,js,output
打开控制台，可以看到一个数组有值，一个是空的

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5735#issuecomment-303413485, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXo-3w48i2zyvKMinAopC56yNEWiqks5r8uskgaJpZM4NjQGx
.

[yuu2lee4]

@yyx990803
原来可以这样用啊，谢谢解答

[zhengtulymGh]

这个怎么用啊，还是没看明白。如果要在@custom2="test2()"里传个额外的参数怎么传？

[huangchen1031]

这个怎么用啊，还是没看明白。如果要在@custom2="test2()"里传个额外的参数怎么传？

@custom2="test2(arguments, newArg)"

[yzfdjzwl]

受用，+1

[Jer-X]

请问vue1也可以这样用吗

[dengshenkk]

官方文档好像没有写啊??

[pinocc]

@dengshenkk 使用自定义事件的表单输入组件 中有涉及

[zerogog]

学到了，但是不太明白为什么啊

[yu-cover]

@zerogog arguments是作用域内可访问的变量

[SandZn]

@custom2="value => test2(value, other)"，
value是子组件传出来的，other可以是父组件传入自己的

[zhaojinzhao]

用中文挺好的，如果你用英文描述，我估计完美的错过这个解决答案。

[zhouzy]

@yyx990803 it is very useful, thanks！

[HeMin0919]

get，谢谢

[yhb-flydream]

多谢，受教

[xyzshen]

用 arguments 就可以了
…
On Tue, May 23, 2017 at 4:15 PM yuri @.*> wrote: @javoski https://github.com/javoski 从命名上来看，显然是一个‘疏忽’，这不是个什么大问题，现在的问题是在有更多参数的时候，取不到其它的参数 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5735 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAefXmb137fTJYSITRLrBtECAOHUGseuks5r8pWLgaJpZM4NjQGx .

vue实例作为中间桥梁 Bus.$on() 这里不能用arguments

[xionHung]

其实可以用test(...arguments, 参数名1...);这样你可以不用获取到数组，可以更清晰你传入的参数是什么

[mineMineGo]

受教

[dying318]

基本上应该合理的处理是test(自定义参数, ...arguments), 这样可以不用考虑组件参数的数量，包括组件可以会传递动态参数，优先确定自己业务参数

[songyule]

这个怎么用啊，还是没看明白。如果要在@custom2="test2()"里传个额外的参数怎么传？

@custom2="test2(arguments, newArg)"

vue1.x can't work