The difference between function names with and without parentheses when vue v-on binds events

when calling a function in native js, you need to add parentheses. Why are the events bound by v-on in vue not added? is this encapsulated at the bottom of vue? I don"t quite understand this. Can anyone give an example to illustrate?

May.22,2021

The value of

v-on can be divided into two cases:

simple value path or function expression

simple path for example:

  • vmuron = "a"
  • vmuron = "a.b"
  • vmuron = "obj.foo"

function expressions such as

  • vMuron = "() = > console.log (1)"
  • vMuron = "function () {console.log (1)}"

values that meet this condition are treated as function calls, that is, you do not have to provide parentheses.

  • an is processed as a ()
  • A.B is treated as A.B ()
  • obj.foo is processed as obj.foo ()
  • () = > console.log (1) is processed as (() = > console.log (1)) ()
  • )
  • function () {console.log (1)} is processed as (function () {console.log (1)}) ()

neither a simple value path nor a function expression

except for the two cases mentioned above, in other cases, the value of v-on will be wrapped in a function declaration.

  • a? B: c is processed as function ($event) {a? B: c}
  • b ($event.target.value) is processed as function ($event) {b ($event.target.value)}

that's why you can use the $event variable.


the difference is that when passing parameters

Menu