在组件中使用dialog

<transfer-component
      :visible.sync="transferVisible"
     ></transfer-component>

通过transferVisible来控制组件的显隐

在组件中

<template>
  <el-dialog class="transferDialog"
             title="工单转接"
             :visible.sync="visible"
             :close-on-click-modal="false"
             center>
                // ...
                <el-row slot="footer">
                  <el-button @click="$emit('update:visible', false)">取消</el-button>

visible作为组件的props存在
此时， 直接点击右上角的关闭按钮会报错， 没有截图， 大概就是说父组件每次render都会覆盖子组件props中visible属性的值，所以 visible 应该作为data或computed中的属性， 而不是props

直接点击右上角的关闭按钮时没有通知到父组件去改变visible

试着在@close事件中通知父组件，但还是一样的报错

正确做法是在beforeClose方法中通知父组件去改变visible的值

需要注意的地方
1， beforeClose的写法是

:before-close="beforeClose"

它是一个方法，但前面用的引号 : 而不是@（...）
2， 它只接受函数名，不接受js语句