聊聊vue 中的v-on参数问题

<div class="groupbody ">
   <ul class="list ">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)">
       <div class="pagecelltext ">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg ">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear "></div>
</div>

exchange: function (event) {
            alert("开始执行方法");
            var a = event.target;
            var cellimg = a.getElementsByTagName("div")[0];
            var msg = cellimg.innerText; 
            page2datas.todos[0].groupheader = msg;
            alert("方法执行中"); 
            var b = document.getElementById("page1");
            b.style.display = "none";
            var c = document.getElementById("page2");
            c.style.display = "block";
            alert("方法执行结束");
          }

<div class="groupbody ">
   <ul class="list ">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)">
       <div class="pagecelltext ">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg ">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear "></div>
</div>

 exchange: function (cell) {
        alert("开始执行方法"); 
        page2datas.todos[0].groupheader =cell.left;
        alert("执行中");
        var b = document.getElementById("page1");
        b.style.display = "none";
        var c = document.getElementById("page2");
        c.style.display = "block";
        alert("方法执行结束");
      }

 <button @click="btnClick">点击</button>
 <script>
 const app = new Vue({
  methods:{
  btnClick(event){
  // 此时event就是当前点击的对象
   console.log(event)
  }
  }
 })
 </script>

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

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

<!-- 这种情况下,如果需要传递当前点击的对象,参数必须是$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>