【bug】关于Vue封装el-dialog对话框关闭无反应问题

最新推荐文章于 2024-06-24 11:08:39 发布

春晓_春眠花落

最新推荐文章于 2024-06-24 11:08:39 发布

阅读量4.3k

点赞数 1

分类专栏： bug收录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49668076/article/details/127938465

版权

bug收录专栏收录该内容

35 篇文章 4 订阅

订阅专栏

封装dialog弹窗，遇到个问题，关闭的时候，在弹窗内部关闭事件里写了控制弹窗开关的属性为false，结果关闭之后就再也打不开了

百度下，应该是弹窗无法自己关闭自己，通过$emit触发父组件中弹窗开关的属性为false就可以解决

1、父组件的子组件，:open=“invoiceSheet”，

    <InvoiceentryDialog
      ref="InvoiceentryDialog"
      :open="invoiceSheet"
    ></InvoiceentryDialog>

2、子组件接收open的值

 props: {
    // dialog显示隐藏
    open: {
      type: Boolean,
      default: false,
    },

  },

3、子组件data中

 data() {
    return {

      // // 弹窗开关
      invoiceSheet: this.open,
    };
  },

4、子组件watch

  watch: {
    open(newVal) {
      this.invoiceSheet = newVal;
    },
  },

5、子组件的dialog上，关键性的就是@close=“$emit(‘close-dialog’)”

    <el-dialog
      title="xxx"
      :visible.sync="invoiceSheet"
      @close="$emit('close-dialog')"
      :close-on-click-modal="false"
      width="80%"
      left
    >

6父组件的子组件上，关键性 @close-dialog=“invoiceSheet = false”

    <InvoiceentryDialog
      ref="InvoiceentryDialog"
      :open="invoiceSheet" 
      @close-dialog="invoiceSheet = false"
    ></InvoiceentryDialog>