v-on 绑定事件传递参数写入和 el-button 默认参数

前言

今天前同事找我要ta之前在公司的wiki笔记，说离职后无法访问了，我问同事：你是不是会定期整理自己的笔记？同事说是，会定期整理归类复习。嗯，想了想自己总是零碎地这学一点那学一点，很久没有好好将自己的知识点整理起来，习惯很不好，继我上一篇文章还是一年半前...重新开始吧~

下面给大伙表演一个，基础不牢，地动山摇。

问题来源

上周自测完顺便帮测试同事的模块，发现了一个"玄学"问题

// 点击按钮调用submit事件
<el-button type="primary" size="small" class="submit-btn" @click="submit">保存并发布</el-button>

// submit传递默认参数needCheckOrder
submit(needCheckOrder = false) {
  console.log(needCheckOrder);
  if (this.isSubmit) return;
    this.$refs.dynamicLegal.$refs['dynamicLegalCreate'].validate((valid) => {
      if (valid) {
        needCheckOrder ? this.checkOrder() : this.openDrawer();
      } else {
       ...
      }
    })
  }

点击按钮执行submit，流程执行错误，打印needCheckOrder，发现该参数为事件对象，而非默认参数false，导致进入了checkOrder事件中，流程执行错误

排查原因

按道理，submit不传递参数时，needCheckOrder参数应为默认值false，但是打印结果是鼠标点击事件，猜测submit的第一个参数已经被事件给占了，而submit对应的是el-button的点击事件。
找到el-button的源码查看是否有传递事件默认参数

查看el-button源码发现果然传递了事件默认参数

真正原因

其实，真正的原因并不在于el-button click事件传递默认参数，而是vue文档没认真、仔细读。
vue文档中事件处理章节关于如何传递event参数写的非常清楚，但是很多人就是不看文档(说的就是我，不认真看)

• 方式一

<div id="example-2">
  <button v-on:click="greet">Greet</button>
</div>

methods: {
  greet(event) {
    console.log(`我是event参数--${event}`);
  }
}

• 方式二

<div id="example-2">
  <button v-on:click="greet('hi', $event)">Greet</button>
</div>

methods: {
  greet(msg, event) {
    console.log(`msg--${event}`);
  }
}

上面el-button点击调用submit的写法为方式一，即不写()，会传递事件参数
所以这种写法调用submit时，needCheckOrder接收到的参数为事件参数

<el-button type="primary" size="small" class="submit-btn" @click="submit">保存并发布</el-button>

v-on事件处理绑定方法的不同写法，在vue的内部其实是有不同解析的，我目前只能看懂一丢丢，也说不清楚，就不写了。

反思

很多时候都说赶紧卷起来学vue3，ts，vite，但我发现自己已经学过的知识并不是那么牢固，不是那么全面，一心向前的同时也要定期温故而知新，巩固地基。