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

 1 <div id="event-with-method">
 2     <!-- 此处必须使用greet或者greet($event) -->
 3     <button v-on:click="greet">Greet</button>
 4 </div>
 5 
 6 <script>
 7 Vue.createApp({
 8   data() {
 9     return {
10       name: Vue.js
11     }
12   },
13   methods: {
14     greet(event) {
15       // `methods` 内部的 `this` 指向当前活动实例
16       alert(Hello  + this.name + !)
17       // `event` 是原生 DOM event
18       if (event) {
19         alert(event.target.tagName)
20       }
21     }
22   }
23 }).mount(#event-with-method)
24 </script>

不带括号会默认传递event对象,而带了括号的相当于函数执行,但是却没有传入参数因此会报错。若greet定义时如果没有传入参数,则带不带括号都一样。如果有多个参数的话,想利用event对象则必须传入$event作为参数

在iView组件的事件中有些会有返回值,这个返回值就相当于event对象

 

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

上一篇:第6章 影响 MySQL Server 性能的相关因素


下一篇:【git | 10】git fetch系列