【父向子传值】
【父级页面】1、在父级页面通过自定义属性 :detail="currentEq"
<transition name="fade-transform" mode="out-in">
<eq-pop v-if="popShow" :detail="currentEq" :state="STATE" class="click-ignore" @on-close="closeDetail" />
<!-- <general-service v-if="serviceShow" /> -->
</transition>
2、在 data 中定义
currentEq: {},
3、将子级页面需要的值,在父级页面获取并给到 currentEq
(此处是获取到的行数据)
details(row){
this.currentEq = row;
},
【子级页面】1、通过 props(与data同级)取值
props: {
detail: {
type: Object,
default: () => {
return {};
},
},
},
2、在需要的地方,即可打印查看取到的值
【子向父传值】
【子级页面】将父级页面需要的值,在子级页面中,通过 $emit 传值
1、在 data 中定义
tableData: [],
2、 点击 "提交" 事件时,传值给父页面
(此处传的是表格信息)(注意:左侧点击事件,右侧点击事件methods中的方法)
【父级页面】 1、父级页面通过 @ 绑定事件
2、父级页面,在 methods 中
// 子传父
getForm(tableData){
console.log(tableData);
// 将值赋给 userTableData ,供后续使用
this.userTableData = tableData;
},
// data 中定义
userTableData: [],
3、点击 "通过" 事件时
4、methods 中 使用,将需要的值传给后端
// 通过按钮
async submitFn() {
console.log(this.userTableData); // 子组件表单值
const res = await API.flowAudit.insert({
orderId: this.detail.orderId,
nodeName: this.detail.nodeName,
nodeId: this.detail.flowNodeId,
auditInfo: this.form.auditInfo,
handler: this.detail.userId,
handlerName: this.detail.userName,
flowKey: this.detail.flowKey,
agree: 1,
updatePurchaseDetails: this.userTableData,
});
console.log(res);
if (res.code === SUC_CODE) {
this.$message.success(res.message);
this.close(true);
} else {
this.$message.error(res.message);
}
},