如何在 Vue.js 中将对象作为 props 发送和接收
2021-11-12
1458
我有一个 Product 对象,我正在从 API 调用中获取它。因此,在父组件中,我想将此对象发送到子对象,即 SoldTickets 组件。
因此,这是我的父组件:
<template>
<section id="cart-page" class="row">
<div v-for="item in cart.attributes.items" :key="item.id">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<div class="title">WARENKORB</div>
<SoldTickets :item = item />
</div>
</div>
</section>
</template>
以及我的子组件:
<template>
<div id="sold-tickets">
<div class="card">
<div class="sold-tickets-actions properties">
<div class="sold-tickets-inner">
<div class="ticket-details">
<div class="ticket-prop">
<div class="ticket-name">{{ item.product_name }}</div>
<div class="ticket-type">{{ item.variation_name }}</div>
</div>
</div>
<DeleteButton @click.prevent="removeProductFromCart(item.id)" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
item: Object,
}
},
}
</script>
因此,我对 Vue 还很陌生,因此我对 props 不是很有信心。你能帮我解决这个问题吗?
2个回答
您大部分都正确,但有几个错误:
您的 props 在子组件中声明不正确,您不应该在其中包含“数据”。您要声明的所有 props 都直接位于组件声明的“props”键下:
export default {
props: {
item: Object,
},
}
您还缺少父组件中属性值周围的引号,因此这是无效的 HTML:
<SoldTickets :item = item />
应该是
<SoldTickets :item = "item" />
Vinay Pai
2021-11-12
只需用
""
或
''
包装绑定值即可,例如:
<SoldTickets :item="item" />
Boussadjra Brahim
2021-11-12