Vue中關於v-on綁定點擊事件時候的參數問題

• v-on的綁定點擊事件的時候關於參數有三種情況,分別如下 :
  1. 綁定的方法後面沒有括號

      <button @click="btnClick">點擊</button>
      <script>
      	const app = new Vue({
      		methods:{
      			btnClick(event){
      			// 此時event就是當前點擊的對象
      				console.log(event)
      			}
      		}
      	})
      </script>
     

  2. 綁定的方法後面有括號

     <button @click="btnClick()">點擊</button>
     <script>
     	const app = new Vue({
     		methods:{
     			btnClick(event){
     			// 此時event是undefined
     				console.log(event)
     			}
     		}
     	})
     </script>
     

  3. 綁定的方法後面有括號,需要傳遞參數

     <button @click="btnClick(123)">點擊</button>
     <script>
     	const app = new Vue({
     		methods:{
     			btnClick(event){
     			// 此時event是123
     				console.log(event)
     			}
     		}
     	})
     </script>
     

  4. 綁定的方法後面有括號,需要傳遞參數,並且需要當前點擊的對象

     <!-- 這種情況下,如果需要傳遞當前點擊的對象,參數必須是$event -->
     <!-- 第一個位置如果要傳數字的話,就不需要加引號,如果要傳一個字符串的話,就必須要加引號,因爲如果不加引號,Vue就會當做一個變量來解析,此時如果在data中沒有定義的話,就會報錯 -->
     <button @click="btnClick(123,$event)">點擊</button>
     <script>
     	const app = new Vue({
     		methods:{
     			btnClick(num,event){
     			// 此時num是123,event是當前點擊的對象,
     				console.log(num,event)
     			}
     		}
     	})
     </script>