ant design vue之 modal组件动态设置title

今天遇到的问题，差点被自己蠢哭了。

问题背景：想要的效果本来是像下面这样。点击新增角色，title是 '新增角色名称'。点击编辑角色名，title是'编辑角色名称'。

 一开始我陷入了一个误区，下面是部分关键代码

<template>
  <a-button @clcik="showNameDialog">新增角色</a-button>
  <a-button @click="showNameDialog(true)">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showNameDialog(isEdit) {
      if(isEdit) {
        // 通过传入的参数判断点击的哪个按钮
        this.dialogTitle = '编辑角色名称'
      } else {
        this.dialogTitle = '新增角色名称'
      }
    }
  }
}
</script>

这样写，乍看一下，没啥毛病啊，通过传入的变量(isEdit)来判断点击的哪个按钮。但是设置的title不管点击的是哪个按钮都是显示 '编辑角色名称'，就很难受，刚开始我把原因归于这个Modal弹窗不支持动态修改title(虽然内心还是很抗拒，觉得不可能不支持啊)，但是一个偶然的机会，我发现把两个click的事件名换成不同的就可以实现想要的效果了。代码如下：

<template>
  <a-button @clcik="showAddDialog">新增角色</a-button>
  <a-button @click="showEditDialog">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showAddDialog() {
      this.dialogTitle = '新增角色名称'
    },
    showEditDialog() {
      this.dialogTitle = '编辑角色名称'
    }
  }
}
</script>

我慌了，看来过通过点击事件来设置这个title完全是没有问题的，那就是前面的代码哪里有问题，没办法，回过头重新定位下原因出在哪了。打debugger，发现代码根本走不到 else 的逻辑里面，这个时候我才恍然大悟，打console.log，终于发现了问题原因，那就是vue中的click事件默认自带的有一个event 原生 dom 参数，如果自己不传变量，那默认第一个变量的值就是 event对象，if 判断是通过真值判断的，对象肯定是个真值，所以这就是我最开始那样写的问题所在了。

<template>
  <!-- 这里要传入 false,不然会自带 event对象参数进去，下面的判断有问题 -->
  <a-button @clcik="showNameDialog(false)">新增角色</a-button>
  <a-button @click="showNameDialog(true)">编辑角色</a-button>
  <a-modal :title="dialogTitle"></a-modal>
</template>
<script>
export default {
  data() {
    return {
      dialogTitle: undefined
    }
  },
  methods: {
    showNameDialog(isEdit) {
      if(isEdit) {
        // 通过传入的参数判断点击的哪个按钮
        this.dialogTitle = '编辑角色名称'
      } else {
        this.dialogTitle = '新增角色名称'
      }
    }
  }
}
</script>

这样写就没有问题了，遇到这个问题主要还是自己大意了，警示警示。