将数组元素从一个组件访问到另一个 Vuejs答案

【问题标题】：Access Array elements from one component to another Vuejs将数组元素从一个组件访问到另一个 Vuejs
【发布时间】：2025-11-24 18:35:01
【问题描述】：

我正在尝试创建一个购物车，并且我有一个列出我所有商品的组件。当我选择“添加到购物车”按钮时，它会将一个项目添加到我在同一组件中显示的虚拟购物车中。我想知道如何使我的真实购物车所在的 App.vue 可以访问该数组？

这是物品类别：

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
          <span class="glyphicon glyphicon-shopping-cart"></span> 0 - Items<span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-cart" role="menu">
          <li> {{ cart }} </li>
        </ul>
      </li>
    </ul>

我得到 {{ cart }} 数组来显示我选择到购物车的任何选项。我想在 App.vue 中做同样的事情，所以基本上有相同的购物车，但在不同的组件中，addToCart 的功能将与 App.vue 保持分离

谢谢。

【问题讨论】：

你应该考虑在你的项目中使用 Vuex，它就是为此目的。 vuex.vuejs.org/en/intro.html
谢谢。我会看看的。这是唯一可用的选择吗？没想到这么大的问题
它是官方的状态管理工具，虽然技术上你可以使用 Redux。 Vuex 一开始可能听起来令人困惑，但它会为您省去很多麻烦。

标签： arrays vue.js components vuejs2 custom-component

【解决方案1】：

如果您所有项目的列表位于您的 App 组件中 - 您可以使用子 -> 通过事件（this.$emit 和 v-on）进行父通信。

查看此文档：https://vuejs.org/v2/guide/components.html#Custom-Events

【讨论】：