vue 组件 子组件向父组件传参 自定义事件 $emit

需求：列表页的内容项可添加  ，点击“自定义”弹出框   添加才做完成后  刷新列表

效果图：

父组件

子组件（弹出框）

 

思路：

1、在子组件完成添加操作后调用emit触发绑定函数，

2、在父组件里自定义事件名，并进行刷新数据的逻辑处理

 

代码  Addstation.vue(父组件)   父组件里自定义事件名   @afterAdd="updateList"

<addwelfare ref="welfareMsg"
                    @afterAdd="updateList"
                    :companyId="firmid"></addwelfare>

  //子组件传过来的
        updateList(data) {
            //添加完成的事件
            console.log("子组件");
            console.log(data);   //"已添加"  子组件
            this.welfareLabelListadd = [];
            this.welfarelabel();
        },

Addwelfare.vue（子组件）

子组件里自定义事件   this.$emit("afterAdd", "已添加");  调用emit触发绑定函数

  addwelfare() {
            // let vm = this;
            this.$refs.welfareForm.validate((isvalid) => {
                if (isvalid) {
                    this.$request
                        .addwelfareTag({
                            companyId: Number(this.companyId),
                            label: this.ruleForm.welfareItem,
                        })
                        .then((res) => {
                            // console.log(res); //福利标签
                            if (res.code == 200) {
                                this.$message({
                                    message: "添加成功",
                                    type: "success",
                                });
                                this.$emit("afterAdd", "已添加");
                                this.dialogVisibl = false;
                            } else if (res.code == 600) {
                                this.$message({
                                    message: "企业会员信息有误",
                                    type: "warning",
                                });
                            } else {
                                this.$message({
                                    message: "添加失败",
                                    type: "warning",
                                });
                            }
                        });
                }
            });
        },