Vue中如何将父组件API返回数据作为props传递给子组件

步骤1：父组件调整 #

首先确保父组件已正确声明响应式变量cartItems，且在引用子组件时完成props绑定：

• 父组件data选项中提前声明cartItems，保证响应式特性：

// 父组件的data配置
data() {
  return {
    // 原有变量（itemsCount、variationId、warningMessage等）保留
    cartItems: [] // 初始默认空数组
  }
}

• 父组件模板中引用子组件的位置，完成props绑定：

<!-- 假设你的子组件注册名为 CartDropdown，替换为你实际的组件注册名即可 -->
<CartDropdown :cart="cartItems" />

你原有addToCart的逻辑不需要修改，接口请求成功后给this.cartItems赋值会自动同步到子组件。

步骤2：子组件调整 #

需要先在子组件中声明接收cart这个props，再补全模板中用到的计算属性和方法：

<script>
export default {
  // 声明接收的props
  props: {
    cart: {
      type: Array,
      default: () => [] // 默认空数组，避免v-for遍历空值时报错
    }
  },
  computed: {
    // 补全购物车总价计算逻辑，可根据实际业务修改单价取值字段
    cartTotalPrice() {
      return this.cart.reduce((total, item) => total + item.quantity * 45, 0).toFixed(2)
    }
  },
  methods: {
    // 删除商品：遵循单项数据流规范，不直接修改props，触发事件通知父组件修改
    removeProductFromCart(product) {
      this.$emit('remove-product', product.id)
    },
    // 清空购物车：同样触发事件交由父组件处理
    clearCartItems() {
      this.$emit('clear-cart')
    }
  }
};
</script>

步骤3：父组件监听子组件事件（可选，用于实现删除、清空功能） #

如果需要实现删除、清空购物车的交互，父组件需要监听子组件抛出的事件，修改cartItems后会自动同步到子组件：

<CartDropdown 
  :cart="cartItems"
  @remove-product="handleRemoveProduct"
  @clear-cart="handleClearCart"
/>

// 父组件methods中添加对应处理方法
methods: {
  // 原有addToCart逻辑保留
  handleRemoveProduct(productId) {
    this.cartItems = this.cartItems.filter(item => item.product.id !== productId)
    // 如有需要同步到后端接口的逻辑，可在这里补充调用
  },
  handleClearCart() {
    this.cartItems = []
    // 如有需要同步到后端接口的逻辑，可在这里补充调用
  }
}

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