在对话框Vue上将道具从父组件传递到子组件

所以我想将batch_code数据从dashboard.vue父review.vue组件绑定到子组件

因此，信息中心包含诸如batch_code之类的详细信息，然后我很难将数据传递给审阅组件，单击“费率和审阅”按钮后，它将获得batch_code

当我尝试时，我只是从返回所说的数据中得到空值。有什么建议？

dashboard.vue

<template>
  <div>
    <v-col cols="10" class="mx-auto">
      <v-card class="pa-4" outlined>
        <v-card-title class="pb-0 pt-2">Dashbard</v-card-title>
        <div v-if="checkifEmpty()">
          <v-row>
            <v-col
              v-for="item in myBatch.all_batch"
              :key="item.batch_code"
              cols="6"
            >
              <v-card class="ma-2" outlined>
                <div class="d-flex">
                  <v-avatar class="ma-3" size="150" tile>
                    <v-img :src="item.image"></v-img>
                  </v-avatar>
                  <div>
                    <v-card-title class="pb-0 pt-2"
                      >{{ item.offer }} ({{ item.level }})</v-card-title
                    >
                    <v-card-text>
                      <div class="mt-0">{{ item.techer_name }}</div>
                      <div class="mt-0">{{ item.batch_name }}</div>
                      <div class="Heading 6 pb-0">
                        {{ item.start_date }} -
                        {{ item.end_date }}
                      </div>
                      <div class="subtitle-1 pb-0">{{ item.type }}</div>
                    </v-card-text>
                  </div>
                  <v-btn elevation="3" v-on:click="openReviewDialog"
                    >Rate and Review!</v-btn
                  >
                </div>
              </v-card>
            </v-col>
          </v-row>
        </div>
        <div v-else>
          <v-card-text class="pb-0 pt-2"
            >You have no enrolled offers</v-card-text
          >
        </div>
      </v-card>
    </v-col>
    <review />
  </div>
  
</template>

<script>
import store from "../../store/index";
import review from "./review"
export default {
  name: "Dashboard",
  components:{
    review,
  },
  computed: {
    myBatch() {
      return store.getters.getMyOffers;
    },
  },
  methods: {
    checkifEmpty() {
      let batch = this.myBatch;
      if (batch == null || batch.all_batch.length == 0) {
        return false;
      } else {
        return true;
      }
    },
    openReviewDialog() {
      this.$store.dispatch("setreviewDialog");
      this.sidebarFront = false;
    }
  },
};
</script>

<style>
</style>

‍‍review.vue

<template>

  <v-row justify="center">
    <v-dialog v-model="reviewDialog" persistent max-width="900px">
      <v-card>
        <v-card-title class="justify-center">
          <span class="headline font-weight-bold"
            >Rate and Review this Course!</span
          >
        </v-card-title>
        <v-card-text>
          <v-container fluid>
            <v-row>
              <v-col cols="12" sm="12" md="12">
                <v-form
                  ref="userReview"
                  v-model="userReviewForm"
                  lazy-validation
                >
                   <v-text-field
                    rounded
                    outlined
                    v-model="subject"
                    label="Subject"
                    required
                  ></v-text-field>

                  <v-text-field
                    rounded
                    outlined
                    v-model="batch_code"
                    label="batch_code"
                    readonly
                  ></v-text-field>

                  <v-textarea
                    rounded
                    outlined
                    v-model="review"
                    counter="250"
                    label="Review"
                    required
                  ></v-textarea>
                  
                  <v-rating v-model="rating">
                   <template v-slot:item="props">
                     <v-icon
                     :color="props.isFilled ? 'orange lighten-1' : 'grey lighten-1'"
                      size = "30"
                     @click="handleRatingChange(props)">mdi-star</v-icon>
                    </template>
                  </v-rating> 

                  

                  <div>
                    <v-btn
                      :loading="loginLoader"
                      large
                      block
                      rounded
                      elevation="0"
                      color="primary"
                      @click="submit"
                    >
                      Submit
                    </v-btn>
                  </div>
                </v-form>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <div class="close"> <v-btn color="error" text @click="closeReviewDialog()"> Close </v-btn></div>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
  
</template>

<script>
import store from "../../store/index";

export default {
  props: {
    item:{
          batch_code: null;
       }
          },
  name: "review",
  data() {
    return {
      getters: store.getters,
      rating: null
    };
  },
  computed: {
    reviewDialog: function () {
      return this.getters.getreviewDialog;
    },
    
  },
  methods: {
    closeReviewDialog: function () {
      //this.show = false;
      //this.$refs.card.hide();
      //store.dispatch("removeLoginError");
      store.dispatch("setreviewDialog");
    },
    handleRatingChange(props){
      console.log(props.index + 1)
      this.rating = props.index +1
    }
  },
};
</script>
'''

p.s: i don't know if it's different when calling props for a component than to a dialog box.