实际工作中使用element-ui对话框Dialog遇到的一些问题总结，在页面写弹框（el-dialog）的时候，代码太多太乱，所以就想把弹框部分提出去。

功能不难，却有很多有用的知识点，所以总结一下。

代码

父页面

<!-- 导入 -->
<pro-imp :temp="tempData" :dialog-imp="dialogImp" @dialogImpClose="dialogImp = $event" />

// 接收pro-imp组件返回值
getDialogImpClose(data) {
  this.dialogImp = data.isOpen
  if (data.result === 'T') {
    this.getList()
  }
}

子组件

<template>
  <div class="pro-imp">
    <el-dialog title="导入excel" :visible.sync="thisDialogImp">
      导入
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ProImp',
  props: {
    dialogImp: {
      type: Boolean,
      default: false
    },
    temp: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    thisDialogImp: {
      get: function() {
        return this.dialogImp
      },
      set: function() {
        // this.$emit('dialogImpClose', { result: 'F', isOpen: false })
        this.$emit('dialogImpClose', false)
      }
    }
  },
  methods: {
    // 如果有关闭按钮
    dialogClose(done) {
      // this.$emit('dialogImpClose', { result: 'F', isOpen: false })
      this.$emit('dialogImpClose', false)
    }
  }
}
</script>

知识点

• props 向子组件传参
• $emit 向父页面弹值
• dialogImpClose 接收方法简写
• computed计算属性set使用

注意点

1. 子组件不能直接dialogImp，这样关闭的时候，它默认会修改该值，vue是不被允许的。必须再用一个临时值thisDialogImp，并且thisDialogImp要随dialogImp变化，所以只能放计算属性里。