vue + element table弹窗组件2

之前写过一个弹窗组件，感觉编辑和添加 复用弹框不是太方便
1、父组件引入子组件，<child ref = "xxx" @updata:list = "getList"></child>

2、子组件中写好 增加时的方法 编辑时的方法  

     data中定义 dialogVisible = false;（弹窗显示） isAdd = false（是否为增加）

     handleAdd(){

           this.dialogVisible = true

          this.isAdd = true

     }

 

     handleEdit(params){

           this.dialogVisible = true;

           this.isAdd = false;

           console.log('这个是单条数据传过来参数'，params)  //想传啥 就传啥

     }

 

3、父组件中 只需要在相对应的点击事件，调用子组件中的 添加 和  编辑 即可

　　add(){

            this.$refs.xxx.handleAdd()

     }

 

    edit(){

          this.$refs.xxx.handleEdit(params)

    }

 

@updata:list = ‘getList’ 是用来弹窗组件完成操作后 更新列表的 
getList是请求列表数据的一个方法
子组件中 this.$emit('updata:list ') 即可