Vue.js中如何通过props传递和接收对象类型的组件参数

问题核心错误点 #

1. 父组件props绑定语法不规范
2. 子组件props声明与父组件传值的字段不匹配

第一步：修正父组件传值语法 #

父组件中v-bind绑定的传值需要用双引号包裹，同时购物车修改逻辑放在父组件更符合单向数据流规范，修改后代码如下：

<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" @remove="removeProductFromCart" />
            </div>
        </div>
    </section>
</template>
<script>
export default {
  // 省略你原有获取cart数据的逻辑
  methods: {
    removeProductFromCart(id) {
      // 实现购物车项删除逻辑
      this.cart.attributes.items = this.cart.attributes.items.filter(item => item.id !== id)
    }
  }
}
</script>

第二步：修正子组件props声明 #

父组件传递的prop名为item，需要在子组件props根层级直接声明对应字段，不要嵌套在其他属性下，修改后代码如下：

<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="handleRemove" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 与父组件传值的prop名对应声明
        item: {
            type: Object,
            required: true,
            // 对象类型默认值必须用工厂函数返回，避免多实例共享引用
            default: () => ({})
        }
    },
    methods: {
        handleRemove() {
            // 通知父组件执行删除操作
            this.$emit('remove', this.item.id)
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者magic bean