在组件中使用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语句

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容