Vue中如何向兄弟组件和子组件传递props？

方案1：状态提升（适用中小项目，无额外依赖） #

1. 找到Product组件和Navbar组件的共同父组件（通常是App.vue），在父组件中定义共享的cartItems响应式数据，以及更新数据的方法：

export default {
  data() {
    return {
      cartItems: {}
    }
  },
  methods: {
    updateCartItems(newCartItems) {
      this.cartItems = newCartItems
    }
  }
}

2. 父组件调用Product组件时，绑定自定义事件接收子组件抛上来的最新购物车数据：

<Product @update-cart="updateCartItems" />

3. 修改Product组件的addToCart方法，接口拿到返回值后触发自定义事件通知父组件更新：

cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => {
  // 把最新购物车数据抛给父组件
  this.$emit('update-cart', response.data.attributes.items)
});

4. 父组件调用Navbar组件时，把当前的cartItems通过props传给Navbar：

<Navbar :cartItems="cartItems" />

5. 修改CartBox组件，承接Navbar传下来的cartItems，再透传给Cart组件：

<template>
  <Cart :cartItems="cartItems" />
</template>
<script>
import Cart from '../components/Cart'
export default {
  components: { Cart },
  // 新增props接收
  props: {
    cartItems: Object
  }
}
</script>

6. 最后在Cart组件中新增props接收cartItems，就可以直接在模板中渲染购物车数据了：

export default {
  props: {
    cartItems: Object
  },
  // 剩下的原有逻辑不变
}

方案2：全局状态管理（适用中大型项目，层级嵌套深的场景） #

如果项目组件多、嵌套深，一层层透传props维护成本高，可以直接用Vue官方的状态管理工具：

• Vue2项目用Vuex
• Vue3项目用Pinia
  把cartItems存在全局的store中，Product组件加购成功后直接更新store里的cartItems，Cart组件直接从store中读取cartItems渲染即可，不需要经过父组件、Navbar、CartBox层层传递。

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