vue v-on绑定事件时函数名加与不加括号的区别

在原生js中调用函数是需要加括号的,为什么vue中v-on绑定的事件都没加,这里是vue底层做了封装吗,我不是太明白这一点,有没有人可以举例子说明一下吗

回答:

v-on的值分俩种情况:

简单取值路径或者函数表达式

简单路径例如:

  • v-on=”a”
  • v-on=”a.b”
  • v-on=”obj.foo”

函数表达式如:

  • v-on=”() => console.log(1)”
  • v-on=”function() { console.log(1) }”

满足这个条件的值会被处理成函数调用, 也即是说, 你不用提供圆括号.

  • a 处理为 a()
  • a.b 处理为 a.b()
  • obj.foo 处理为 obj.foo()
  • () => console.log(1) 处理为 (() => console.log(1))()
  • function() { console.log(1) } 处理为 (function() { console.log(1) })()

非简单取值路径也非函数表达式

除去上面提到的两种情况, 其他情况下 v-on 的值会被包裹进一个函数声明内.

  • a ? b : c 处理为 function($event) { a ? b : c }
  • b($event.target.value) 处理为 function($event) { b($event.target.value) }

这就是为什么你可以使用 $event 变量的原因.

回答:

区别在于传参数的时候

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注