vue 子组件向父组件传值 (vue+vant h5移动端)

4 篇文章 0 订阅

前提:同一个页面根据接口返回的状态渲染不同的组件
遇到的问题:审核失败后需要重新录入资料,
点击重新提交资料当前页面怎么渲染为提交资料页面?
牵涉到的页面,目录如下
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";
      }
    },
    }

注:该文章仅作为自己开发时的记录 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值