如何将道具从父母转移到孙vue.js

Question

我有 3 个组件。 Profile.vue - 父级，Information.vue - 子级和 Rempayment.vue - 孙级。在 Profile.vue 中，我从 api 传输数据 并将它们传递给父母。然后我需要同样的孙子（rempayment.vue）。

这是 profile.vue：

<template>
<div>
<Nav />
<div v-if="repaid">
  <Repaid />
</div>
<div v-else>
  <Information :loan="detailsLoan" />
  <Timetable :loan="detailsLoan" :confirmed="confirmed" v-if="confirmed 
 >0" />
  <TimetableApplication :loan="loan" v-else-if="confirmed == 0" />
  <Documents :loan="detailsLoan" />
</div>
</div>
</template>

<script>
import co from "@/util/co.js";
import Nav from "@/scenes/ClientZone/components/Nav.vue";
import Information from "@/scenes/ClientZone/components/Information.vue";
import Timetable from "@/scenes/ClientZone/components/Timetable.vue";
import TimetableApplication from 
"@/scenes/ClientZone/components/TimetableApplication.vue";
import Documents from "@/scenes/ClientZone/components/Documents.vue";
export default {
components: {
Nav,
Information,
Timetable,
TimetableApplication,
Documents
},
methods: {},
data: function() {
return {
  loan: {},
  repaid: false,
  detailsLoan: { data: {}, schedule: {}, sum: {} },
  confirmed: 0
};
},
mounted() {
// all informations about loan
co.getLoanList(
  this.$store.getters.customer_id,
  this.$store.getters.token
).then(data => {
  if (data.status > 400) {
    this.$router.push({ name: "login" });
  } else {
    let _data = data.data;
    console.log(_data);
    this.loan = Object.values(_data).map(loan => {
      if (loan.confirmed == 0) {
        return loan;
      } else if (loan.debt > 0) {
        this.confirmed = loan.confirmed;
        return loan;
      } else if (loan.debt == 0) {
        this.repaid = true;
        return loan;
      }
    })[0];
  }
});

我的信息.vue:

 <template lang="pug">
  .main_box
  .main
    .container.flex
        .box
            .loan_info
                .info
                    a Loan ID
                    a Product
                    a Amount
                .details
                    a {{loan.data.id}}
                    a Crédito de {{loan.data.period / 30}} meses
                    a R$ {{loan.data.amount}}
            .loan_status
                .status
                    a Status: 
                .txt
                    a {{status}}
        Repayment(:loan="detailsLoan")
  </template>

  <script>
  import Repayment from "@/scenes/ClientZone/components/Repayment.vue";
 import co from "@/util/co.js";

 export default {
  name: "Information",
  components: {
 Repayment
  },
  data() {
 return {
  detailsLoan: { data: {}, schedule: {}, sum: {} }
 };
 },
computed: {
 status() {
   if (this.loan.data.delay > 0) {
    return "O pagamento do montante do empréstimo está atrasado"; 
 //Płatność kwoty pożyczki jest opóźniona
  }
  if (this.loan.data.debt > 0) {
    return "pożyczka jest aktywna";
  }
  if (this.loan.data.debt == 0) {
    return "pożyczka zatwierdzona";
  }
}
},
props: {
  loan: { type: Object, required: true }
 }
};

我的 rempayment.vue - 孙子

<template lang="pug">
.main_repayement
    .container
      .box_1(:style="veryfi")
        .box
          .pic
          .main_box
            .info 
              a Trwa weryfikacja wniosku
      .box_2(:style="delay")
        .box
          .pic
          .main_box
              .info
                  a Aktualnie do spłaty
              .amount 
                  a {{loan.l_amount}} PLN
          .details
              .loan
                  a Rata: 
                  a(v-for="loan in loan.schedule") {{loan.amount}}
              .interest
                  a Interesse por atraso: 
                  a R$ {{late_fee}}
          button(type="button" @click="change") Pago
      .box_3(:style="activeLoan")
        .box
          .pic
          .main_box
            .info 
              a Pożyczka aktywna
            .info_txt
              a Termin płatności raty upływa
              a {{showDate}}
 </template>

 <script>
 import co from "@/util/co.js";
  export default {
    name: "Repayment",
    data() {
    return {
    objectNone: {
    display: "none"
    },
    objectBlock: {
    display: "block"
    },
    red: "blue"
  };
  },
 props: {
  loan: { type: Object, required: true }
 },

所以我试图将道具贷款从信息传递到还款，但仍然是错误的。有人可以引导我找到解决方案吗？

Answer 1

我们可以使用其中一种解决方案：

1. Provide/inject
2. Vuex Store 用于在组件之间共享数据

注意：提供/注入绑定不是反应式的。但是如果提供了被观察的对象，它们确实保持反应性。 Read more

Answer 2

你需要做些小改动，在 information.vue 中你需要写 :loan="loan" 而不是 :loan="detailsLoan"。希望它有效。

信息.vue：

<template lang="pug">
  .main_box
  .main
    .container.flex
        .box
            .loan_info
                .info
                    a Loan ID
                    a Product
                    a Amount
                .details
                    a {{loan.data.id}}
                    a Crédito de {{loan.data.period / 30}} meses
                    a R$ {{loan.data.amount}}
            .loan_status
                .status
                    a Status: 
                .txt
                    a {{status}}
        Repayment(:loan="loan")
  </template>

  <script>
  import Repayment from "@/scenes/ClientZone/components/Repayment.vue";
 import co from "@/util/co.js";

 export default {
  name: "Information",
  components: {
 Repayment
  },
  data() {
 return {
  detailsLoan: { data: {}, schedule: {}, sum: {} }
 };
 },
computed: {
 status() {
   if (this.loan.data.delay > 0) {
    return "O pagamento do montante do empréstimo está atrasado"; 
 //Płatność kwoty pożyczki jest opóźniona
  }
  if (this.loan.data.debt > 0) {
    return "pożyczka jest aktywna";
  }
  if (this.loan.data.debt == 0) {
    return "pożyczka zatwierdzona";
  }
}
},
props: {
  loan: { type: Object, required: true }
 }
};