Vue.js Vue：使用计算属性在应用程序与组件之间和组件之间传递参数

对于初学者的问题很抱歉，我很确定这将是一个重复的问题，但我实际上不知道要找到它需要使用什么术语。我刚从Vue开始

我刚刚开始学习Vue，并学习本课程。在这个问题上，我不知道这个术语，所以我要用。。。称为cart的应用程序级数据参数。购物车是一个数组，它保存用户添加到购物车中的每个项目的id

这个问题告诉我们添加一个按钮以从购物车中删除项目

我在尝试创建计算属性时遇到了问题，这将允许我在所选项目不在购物车中时隐藏“删除”按钮` 将数据从应用程序级的cart数组传递到组件级的产品组件中的计算属性，这样我就可以使用如下内容：hidden=！在“从购物车中移除”按钮上嵌入，该按钮本身在组件中定义。在这里，invot将是一个计算值。 将所选产品从组件传送到应用程序级别，在应用程序级别计算Incontat，然后在组件级别使用计算值。 无论哪种方式，我似乎都不知道如何以我想要的方式来做这件事，这看起来有点像v-bind的操作方式。也就是说，我认为我可以使用我认为必须由某些事件触发的方法来拼凑出一个解决方案，但我不明白如何使用内置功能来实现这一点，以便动态自动计算Incontat的值

---

也许在接下来的几门课程中会有一个答案，但我不认为我们会在介绍材料中涵盖这一点。对不起，这个新问题。提前感谢。

在Vue中，从高级对象到低级对象的状态通信方式是通过道具

所以，假设你的应用看起来像

<MyApp>
  <MyShoppingPageWithItems>
    <MyItem></MyItem>
    <MyItem></MyItem>
  <MyShoppingPageWithItems>
</MyApp>

<template>
  <div>
    <MyItem v-for="item in items" :item=item :cart="cart"?
    </MyItem>
  </div>
</template>

在您的项目模板中

<template>
  <div>
    <div>
      {{item.name}}
    </div>
    <div v-if="cart.includes(item.id)">
      Remove button or whatever
    </div>
  </div>
</template>

---

请注意，该公式与上述公式完全相同，但仅包括此项。用于购物车和物品。在模板中，用户可以这样做。在参考道具、数据和计算属性时暗示。

以上编辑。没有发射，因为没有任何变化/没有任何事件发生。您只是在检查状态，而检查项目状态的最佳位置是在项目组件中。另一种思考方式不是道具与计算值通信。计算出的值只是查看它们所在对象的道具。道具就在那里。我想我更倾向于环境变量隐喻，而不是继承属性隐喻，但我明白这两者的含义。我之所以在继承属性隐喻中犹豫不决，是因为子组件只继承从父组件传下来的显式道具，而在我在Ruby中的短暂经历中，子类继承了一切。但是，是的！你的想法肯定是对的最后，MyApp和其他任何组件一样，只是一个组件。所以它的数据只是组件数据，可以作为道具传递给任何人。关于顶级组件的唯一特别之处是，可以使用此$root从子级访问它，但这是一种反模式。见文件：

<template>
  <div>
    <div>
      {{item.name}}
    </div>
    <div v-if="isInCart">
      Remove button or whatever
    </div>
  </div>
</template>

<script>
   export default {
     props: ['cart', 'item'],
     computed: {
       isInCart() {
         return this.cart.includes(this.item.id)
       }
     }
   }
</script>