Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

自定义事件传参问题 #5735

Closed
yuu2lee4 opened this issue May 23, 2017 · 28 comments
Closed

自定义事件传参问题 #5735

yuu2lee4 opened this issue May 23, 2017 · 28 comments

Comments

@yuu2lee4
Copy link

What problem does this feature solve?

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

What does the proposed API look like?

Parent component:

<child v-for="(item, index) in data" @custom="parentMethod(index, $1, $2)"></child>

Child component:

//someWhere emit a custom event  
......  
this.$emit('custom', arg1, arg2);  
......

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

@javoski
Copy link
Member

javoski commented May 23, 2017

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

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

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

@yuu2lee4
Copy link
Author

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

@yyx990803
Copy link
Member

yyx990803 commented May 23, 2017 via email

@yuu2lee4
Copy link
Author

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

@yyx990803
Copy link
Member

yyx990803 commented May 23, 2017 via email

@yuu2lee4
Copy link
Author

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

@yyx990803
Copy link
Member

yyx990803 commented May 23, 2017 via email

@yuu2lee4
Copy link
Author

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

@zhengtulymGh
Copy link

zhengtulymGh commented Sep 13, 2017

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

@huangchen1031
Copy link

huangchen1031 commented Nov 8, 2017

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

@custom2="test2(arguments, newArg)"

@yzfdjzwl
Copy link

yzfdjzwl commented Dec 5, 2017

受用,+1

@Jer-X
Copy link

Jer-X commented Dec 7, 2017

请问vue1也可以这样用吗

@dengshenkk
Copy link

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

@pinocc
Copy link

pinocc commented Jan 21, 2018

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

@zerogog
Copy link

zerogog commented May 12, 2018

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

@yu-cover
Copy link

yu-cover commented Jun 7, 2018

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

@SandZn
Copy link

SandZn commented Nov 14, 2018

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

@zhaojinzhao
Copy link

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

@zhouzy
Copy link

zhouzy commented Jan 31, 2019

@yyx990803 it is very useful, thanks!

@HeMin0919
Copy link

get,谢谢

@yhb-flydream
Copy link

多谢,受教

@xyzshen
Copy link

xyzshen commented Jul 30, 2019

用 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
Copy link

xionHung commented Aug 2, 2019

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

@gy1001
Copy link

gy1001 commented Aug 16, 2019

受教

@dying318
Copy link

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

@songyule
Copy link

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

@custom2="test2(arguments, newArg)"

vue1.x can't work

@xdewx
Copy link

xdewx commented Mar 16, 2023

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

vue3.2.47中行不通

@somesky
Copy link

somesky commented Apr 26, 2023

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

vue3.2.47中行不通

我尝试在vue3.2.30也是行不通的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests