需求:列表页的内容项可添加 ,点击“自定义”弹出框 添加才做完成后 刷新列表
效果图:
父组件
子组件(弹出框)
思路:
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",
});
}
});
}
});
},