前提:同一个页面根据接口返回的状态渲染不同的组件
遇到的问题:审核失败后需要重新录入资料,
点击重新提交资料,当前页面怎么渲染为提交资料页面?
牵涉到的页面,目录如下:
index.vue :主页面:根据状态渲染不同的组件
审核失败页面:veteransFail.vue
提交资料页面:submitVeterans.vue
1.子组件:veteransFail.vue (审核失败页面)
实现思路:点击重新提交资料按钮 ,改变状态值,是状态值为提交资料的状态值,并且传递给主页面(父组件:index.vue)
sonStatus:状态值,
子组件代码:
<div style="padding: 23% 5%">
<van-button
round
block
type="info"
native-type="submit"
color="#d08e6d"
@click="reApply"
>重新提交资料</van-button
>
</div>
reApply(newData, prevData) {
this.$emit("getStatus", this.sonStatus);
},
父组件:index.vue 接收子组件传的值
父组件代码:
<template>
<div class="appoint">
<div :is="currentView" @getStatus="getStatus"></div>
</div>
</template>
methods: {
getStatus(res) {
this.status = res;
console.log(this.status);
if (this.status == 1) {
// 显示页面:提交资料
this.currentView = "submitVeterans";
} else if (this.status == 2) {
// 显示页面:审核中
this.currentView = "veteransWait";
}
},
}
注:该文章仅作为自己开发时的记录 。