Allow specifying parameter names of custom events

[CarterLi]

What problem does this feature solve?

Besides #7465, the event handling in vue ( saying $emit & @xxx ) is still not easy to use as what angularjs does.

Angularjs allow developers specify name of an event's callback argument. For example I'm implementing a custom dropdown selector, every item's label and value is customizable by user. I wrote code blow for angularjs:

function getLabel($item) {
  const result = this.label({ $item }); // binding: { label: '&' }
  return String(result === undefined ? $item : result);
}

<custom-selector
  options="$ctrl.options"
  label="'prefix ' + $item.label+ ' whatever'"
></custom-selector>

In vue, you have to write a method to handle this, because you can't get the parameter $item in the template.

We do have a magic parameter $event that works only with native events, but you can't implement it in normal way for custom events.

What does the proposed API look like?

vm.$emitWithParamName('event', { $param1: param1, $param2: param2 });

I'm not good at naming things :(

[posva]

You can already vm.$emit('event', { firstParam: 1, secondParam: 2 }) 🙂

You can handle events with a callback as well: @event="({ firstParam }) => myVar = firstParam"

We do have a magic parameter $event that works only with native events, but you can't implement it in normal way for custom events.

It also work with custom events

I don't know what you're trying to do in Vue that you already know how to do in Angular.js but it's normal to use Vue tools and therefore have a different implementation. You can use the forum or the Discord server if you want to share your thoughts with other devs and get some feedback

[CarterLi]

Oh my...

It should definitely be documented. What I'm seeing in the doc was just

vm.$emit( event, […args] )
Arguments:

{string} event
[...args]
Trigger an event on the current instance. Any additional arguments will be passed into the listener’s callback function.

And for event handling

Listening to Events
Method Event Handlers
Methods in Inline Handlers

Nothing else

@yyx990803

[posva]

You may want to do a PR to the guide. At the end is just a js function, so passing objects is another js pattern

[CarterLi]

Ok, now I understood. So Vue does not support specifying param's name, but it does support full JS spec ( that was a surprise ) in the template so you can define a arrow function in the template and extract the first object param to simulate the named params.

But why $event works? there's no arrow function in the template

EDIT: There can be a more straight-forward way:

vm.$emit('event', 1, 2)
@event="(firstParam, secondParam) => myVar = firstParam"

EDIT2: Guessing how @event works

const $event = new Function('$event', component.getAttribute('@event'))(event);
if (typeof $event === 'function') $event.apply(this, toArray(arguments).slice(1));

[posva]

it does support full JS spec ( that was a surprise ) in the template so you can define a arrow function in the template and extract the first object param to simulate the named params.

it doesn't support it, it reuses the code and makes the browser execute it

Yes, there are other ways but please do not hijack the issue to post usage question, use the appropriate channels (as suggested before) for that 🙂 . You can also take a look at the source code, it generates a function when you do not provide one

[CarterLi]

it generates a function when you do not provide one

So it's supported only in .vue files.

I still think It's a good idea to support named params natively. There will be less confusing, less code ( does not need to write a arrow function ), more straight-forward, (maybe) allow using in raw string templates.

please do not hijack the issue to post usage question, use the appropriate channels (as suggested before) for that 🙂 . You can also take a look at the source code, it generates a function when you do not provide one

Ok