Subscribe on changes!

make $event accept all arguments while listener function has userDefine parameters

avatar
Nov 16th 2021

Version

3.2.22

Reproduction link

no-reproduction-just-fake-url

Steps to reproduce

child components: $emit('event',arg1,arg2,arg3)

and parent component:@event="fn(custom_par,$event)"

And then $event will only contains one args without arg2,arg3, that was unacceptable. And I know if the listener function wrote like @event="fn", then all args will send to fn, but that's not convient while I have to run with my own parameters

What is expected?

$event will accept all arguments while with custom parameters

What is actually happening?

that will be more convient while I have to run with my own parameters in listener functions


Just change the expressions in native VUE.global.js, about lines 14637 in transformOn function

 exp = createCompoundExpression([
                  `${isInlineStatement
                    ? `$event`
                    : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
                  exp,
                  hasMultipleStatements ? `}` : `)`
              ]);

to

  exp = createCompoundExpression([
                  `${isInlineStatement
                    ? `(...$event)` //change it here to accept all arguments with es6  syntax
                    : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
                  exp,
                  hasMultipleStatements ? `}` : `)`
              ]);
avatar
Nov 16th 2021

@event="(...args) => fn(custom_par, ...args)"

avatar
Nov 16th 2021

Additionally, this would be a breaking change, which we won't do.

avatar
Nov 16th 2021

@event="(...args) => fn(custom_par, ...args)"

yes, that will work, But a bit not straightforward

avatar
Nov 16th 2021

Additionally, this would be a breaking change, which we won't do.

Did you really think of this, I have change the vue.global.js as I thought while all goes well as far. My applycation contains about 254 Vue instances .(with elementPlus). just change one line code here:

exp = createCompoundExpression([
                  `${isInlineStatement
                    ? `(...$event)` //change it here to accept all arguments with es6  syntax
                    : `${``}(...args)`} => ${hasMultipleStatements ? `{` : `(`}`,
                  exp,
                  hasMultipleStatements ? `}` : `)`
              ]);