将数据从子组件传递到父组件Vue js答案

【问题标题】：Pass data from child component to parent component Vue js将数据从子组件传递到父组件Vue js
【发布时间】：2020-09-25 13:10:48
【问题描述】：

我正在尝试将数据从子组件“A”传递到父组件“B” （在组件“B”中，我使用组件“A”）

基本上我正在创建一个产品详细信息页面，所以从类别组件中单击产品，它将打开产品页面，但它也应该只显示被单击产品的数据，我该如何实现？

所以我创建一个带有动态参数的路由（用于产品 slug 或 ID），然后在单击产品缩略图时导航到该路由。

感谢您的建议

【问题讨论】：

【解决方案1】：

Vue 中子组件与其父组件通信的惯用方式是发出事件：

子模板（ProductItem.vue）：

<template>
  <div>
    // component details omitted
    <button @click="$emit('show')">Show Product</button>
  </div>
</template>

父模板（ProductList.vue）：

<template>
  <div>
    <ProductItem v-for="product in products" @show="showProduct(product)" />
  </div>
</template>

如果需要，您还可以将有效负载（即数据）与事件一起传递。

如果您想在单击项目时显示产品详细信息页面，听起来您想要创建一个带有动态参数的路由（用于产品 slug 或 ID），然后在以下情况下导航到该路由产品缩略图被点击了？

【讨论】：

如果您想在单击项目时显示产品详细信息页面，听起来您想要创建一个带有动态参数的路由（用于产品 slug 或 ID），然后单击产品缩略图时导航到该路线？没错
是的，我想要您所说的相同功能。我不知道如何实现它，你能建议吗？
查看dynamic route matching 上的 Vue 路由器部分。这显示了如何配置路由，以及如何在页面组件中检索路由参数。您可以使用它来加载要显示的相关产品详细信息。
能否使用动态路由匹配来实现该功能？
是的，这正是我所说的。您可以设置类似“/laptops/:slug”的路由，然后匹配 URL '/laptops/macbook' 或 '/laptops/thinkpad' 等，并加载可以获取和显示相关产品详细信息的组件。