Leitfaden zum Senden von Requisiten in Vue

Question

Ich bin noch neu bei Vue, daher verstehe ich die Logik noch nicht ganz. Mein Problem ist, dass ich die Komponenten „Ticket“ und „Ticketliste“ habe. Wenn ich mich also nicht in meiner Ticketlistenkomponente befinde, erstelle ich einige Ticketdaten und möchte sie basierend auf der Ticketkomponente anzeigen. Zur Verdeutlichung ist dies meine Ticketlisten-Komponente:

<template>
    <section class="tickets">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-3 mb-3">
                    <Ticket v-for="Ticket in Tickets" :key="ticket.id"
                </div>
            </div>
        </div>
    </Abschnitt>
</template>

<script>
Ticket aus './Ticket' importieren
Standard exportieren {
    Komponenten: {
        Fahrkarte
    },
    Daten() {
        zurückkehren {
            Tickets: [
                {
                    ID: 0,
                    Kategorie: "Einzelkarte",
                    Preis: „€3,50“,
                    Tarif: [
                        „Wählen Sie eine Option“,
                        „Erwachsene“,
                        „Erwachsener erm.“,
                        „Kinder / Jugendliche“,
                        „Kinder / Jugendliche erm.“,
                    ],
                    verfügbare Menge: 23,
                    Artikelnummer: "2021.05.04-2673990197-1",
                },
            ],
        };
    },
}
</script>

Es gibt auch eine Ticketkomponente:

<template>
  <widget type="ticket" class="--flex-column">
    <div class="top --flex-column">
      <div class="bandname -bold">Ghost Mice</div>
      <div class="tourname">Heimtour</div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png"
      <div class="deetz --flex-row-j!sb">
        <div class="event --flex-column">
          <div class="date">3. März 2017</div>
          <div class="location -bold">Bloomington, Indiana</div>
        </div>
        <div class="price --flex-column">
          <div class="label">Preis</div>
          <div class="cost -bold">€{{ ticket.price }}</div>
        </div>
      </div>
    </div>
    <div class="rip"></div>
    <div class="bottom --flex-row-j!sb">
      <a class="btn button" href="#">ZUM WARENKORB HINZUFÜGEN</a>
    </div>
  </widget>



</template>

<script>
Standard exportieren {
  Requisiten: ['Ticket'],
}
</script>


<Stilbereich>
@import 'https://i.koya.io/flex/1.1.0.css';

*, ::nachher vorher {
   Boxgröße: nicht festgelegt;
}
</style>

Ich zeige also die TicketList-Komponente auf einer Seite an, aber das Problem ist, dass sie nichts anzeigt. Daher möchte ich wissen, wie ich sie miteinander verbinden und die Ticketdaten basierend auf der Ticketkomponente anzeigen kann. Ich hoffe, ich habe es klar ausgedrückt, wenn nicht, kann ich Ihnen in den Kommentaren antworten.

Answer 1

问题在于props的名称，你需要将ticket作为props传递，而不是product

...
   <Ticket v-for="ticket in tickets" :key="ticket.id" :ticket="ticket"/>
...

或者在你的Ticket组件内设置：

props: ['product']