Vue中绑定事件时调用函数加括号和参数与不加括号的区别

1. 这是我定义的chanDialogVisible函数。

const chanDialogVisible = (row) => {
  console.log(row)
  if (isNull(row)) {
    dialogTitle.value = '添加用户'
    dialogTable.value = {}
  } else {
    dialogTitle.value = '编辑用户'
    dialogTable.value = JSON.parse(JSON.stringify(row))
  }
  dialogVisible.value = true
}

2. 不加括号和参数：

 <el-button type="primary" @click="chanDialogVisible">点击显示对话框</el-button>

3. 打印出来的row是一个event对象：
   
4. 加括号：

 <el-button type="primary" @click="chanDialogVisible()">点击显示对话框</el-button>

5. 那么打印出来的就是：
   
   这个undefined就是row真正的值。

6. 事实证明：
   如果不加括号，则函数第一个参数自动为 event；
   如果加了括号，就是传参。如果此时想要获取event对象，就需要手动传入 $event。
   如下所示：

<el-button type="primary" @click="chanDialogVisible(undefined,$event)">点击显示对话框</el-button>

7. 如图所示：获取到event对象了