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 ') 即可

猜你喜欢

转载自www.cnblogs.com/TreeCTJ/p/12511063.html