v-on(@)绑定方法传参$event

表单有几项内容，点击编辑，表单项为可编辑状态，编辑完之后再保存刷新数据变为禁用状态。通常可以做两个按钮，切换显隐，这次尝试用一个按钮，动态改变按钮内的文字内容。

<el-form ref="form" :model="form">
  <el-button type="primary" @click="editForm($event)"></el-button>
  <el-form-item label="温馨提示（中文）" :prop="cnTips">
    <el-input type="textarea" v-model="form.cnTips" :disabled="disable" clearable></el-input>
  </el-form-item>
  <el-form-item label="温馨提示（英文）" :prop="enTips">
    ...
  </el-form-item>
  ...
</el-form>
export default {
  data() {
    return {
      form: {},
      disable: false
    }
  },
  methods: {
    editForm(event) {
      let text = event.target.innerText;
      if (text == '编辑') {//点击编辑按钮
        text = '保存';
        this.disable = false;
      } else {//点击保存按钮
        text = '编辑';
        this.saveForm(); //调取保存方法，成功保存之后再让this.disable = true;
      }
    }
  }
}

看下以下实参传不传$event的区别

<button @click="showInfo">点击我</button>
showInfo(a, b) {
  //没有传实参的时候，第一个接收的就是事件对象
  console.log(a, b); //a是事件对象 b:undefined
  console.log(a.target);//<button>点击我</button>
  console.log(a.target.innerText); //点击我
}
<button @click="showInfo($event, 2, 3)">点击我</button>
showInfo(a, b, c) {
  console.log(a, b, c); //a是事件对象 b:2 c:3
}
<button @click="showInfo(2, 3)">点击我</button>
showInfo(a, b, c) {
  console.log(a, b, c); //a:2 b:3 c:undefined，没有事件对象，所以在传参的时候使用$event占位
}