el-dialog 的关闭事件执行两次

<el-dialog
          class="dataObject"
          :title="$t('add.B') + $t('dataObject.C')"
          :visible.sync="viewing"
          :close-on-click-modal="false"
          width="40.5rem"
          @open="load"
          @closed="handleDialogClosed">
 <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click.native="handleDialogClosed">关闭</el-button>
  </span>
</el-dialog>

问题：
当点击弹框的关闭事件时 handleDialogClosed会被执行两遍，但是点击弹框右上角的 X 时却只会执行一遍。 两处操作都只是绑定了同一个操作事件， 为什么一个会执行两遍一个却只会执行一遍

原因：
因为弹框下方的button事件 关闭弹框的时候会自动执行 @closed
事件。 所以 关闭按钮执行了一遍，弹框本身的close事件又执行了一遍， 一共执行了两边。
但是弹框右上角的X是弹框本身的 关闭事件故只执行一遍。

解决方案：

将关闭按钮的事件 和 弹框右上角的X事件 分开绑定的方法即可。