Vue中如何发送props

Posted 2023-02-23

【中文标题】Vue中如何发送props

【英文标题】：How to send props in Vue

【发布时间】：2021-10-05 23:28:08

【问题描述】：

我是vue的新手，所以我还没有完全理解逻辑。我的问题是我有票证和票证列表组件。所以我不在我的工单列表组件上，我正在创建一些工单数据，我想根据工单组件显示它们。为了更清楚，这里是我的票务列表组件：

<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" :product="ticket"/>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import Ticket from './Ticket'
export default 
    components: 
        Ticket
    ,
    data() 
        return 
            tickets: [
                
                    id: 0,
                    category: "Einzelkarte",
                    price: "€3,50",
                    tariff: [
                        "Wählen Sie eine Option",
                        "Erwachsene",
                        "Erwachsener erm.",
                        "Kinder / Jugendliche",
                        "Kinder / Jugendliche erm.",
                    ],
                    available_amount: 23,
                    article_number: "2021.05.04-2673990197-1",
                ,
            ],
        ;
    ,

</script>

还有票务组件：

<template>
  <widget type="ticket" class="--flex-column">
    <div class="top --flex-column">
      <div class="bandname -bold">Ghost Mice</div>
      <div class="tourname">Home Tour</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">3rd March 2017</div>
          <div class="location -bold">Bloomington, Indiana</div>
        </div>
        <div class="price --flex-column">
          <div class="label">Price</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="#">ADD TO CART</a>
    </div>
  </widget>



</template>

<script>
export default 
  props: ['ticket'],

</script>


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

*, ::after, ::before 
   box-sizing: unset;

</style>

所以，我在其中一个页面中显示 TicketList 组件，但问题是它没有显示任何内容。所以我想知道如何将它们连接在一起并根据票证组件显示票证数据。我希望我很清楚，但如果我不是，我可以在 cmets 中回答你。

【参考方案1】：

问题是道具名称，您需要将ticket作为道具传递而不是product

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

或者相反的你内部Ticket组件集：

props: ['product']