vue 子组件向父组件传值（vue+vant h5移动端）

小半 • 2023年1月18日下午6:19 • 前端开发 • 阅读 194

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

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

文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/79323.html