一个对话框多次使用，设置对应的不同标题

1,首先，如果你的对话框是封装成了一个新组件的话，记得在父盒子中导入使用这个组件的过程中

在他的内部加上 ref 这样就可以实现，使用到的组件可以修改调用这个封装出去的对话框里面的内容，和修改对话框组件中的数据

比如:<Add ref="add" />-----这个是写在要使用这个对话框的组件中的，记得导入！

使用这个组件的组件  中  如何修改内容和调用方法？

比如控制对话框的显示和隐藏
this.$refs.add.show = true

_____________________________________________________________________________

2，上面的条件达成后， 首先先在 对话框内的 data中写上属性：mode，设置为空

 data() {
        return {
 mode:'', //用来控制同一对话框内 不同的标题
}
}

_____________________________________________________________________________

3，规划好对应的模态框的识别字符是什么，比如：新增的时候是 mode='add',  编辑的时候是 mode='edit'   

_____________________________________________________________________________

4，在对应的点击事件中 写上修改mode的代码

比如在新增按钮的点击事件中
/* 新增按钮的点击事件 */

    addEvent(str) {
      // 打开弹框
      this.$refs.add.show = true
      /* 修改mode的内容 */
      this.$refs.add.mode = 'add'  //add标识 为 新增
    }

比如 在编辑的时候


/* 点击编辑部门后的事件 */
    editClick(data) {
      /* 点击编辑部门时 将mode修改为edit */
      this.$refs.add.mode = 'edit',
        this.$refs.add.show = true  //打开对话框
    },

_____________________________________________________________________________

5，在对话框中将  el-dialog中 将title 设置为动态的   :title = "title" ，然后再加上个 计算属性computed  在其中监听 mode的变化，来修改title的内容

<el-dialog @close="closeEvent" :title="title" width="700px" :visible.sync="show"></el-dialog>

computed:{
        title(){
            /* 如果mode的内容是 add 的话就说明是新增的模态框 这时候就需要将标题修改成新增 */
            if (this.mode === 'add') {
                return '新增部门'
            }else{
                /* 如果不是add 那就是编辑的模态框 */
                return '编辑部门'
            }
        }
    }

这样就实现了   虽然用的是  同一个对话框，但是不同的点击事件  弹出来的对话框标题也是不同的

也可以使用这个方法，区别开 不同模态框之间按下确定后  发送不同的请求

_____________________________________________________________________________