Pass data from child component to parent component Vue js

Question

I am trying to pass data from child component "A" to parent component "B" (In component "B" i am using component "A")

Basically i am creating a product detail page , so on click product from category component , it will open product , page but it should also show data of only the product which is clicked , how can i achieve that ?

So i to create a route with a dynamic parameter (for the product slug or ID) and then navigate to that route when the product thumbnail is clicked.

Codepen

Your suggestions appreciated

Nilson Jacques Nilson Jacques · Accepted Answer · 2020-06-06T11:03:53

The idomatic way for a child component to communicate with its parent in Vue is to emit events:

child template (ProductItem.vue):

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

parent template (ProductList.vue):

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

You can also pass a payload (i.e. data) along with the event if you want.

If you're wanting to display a product detail page when the item is clicked, it sounds like what you want is to create a route with a dynamic parameter (for the product slug or ID) and then navigate to that route when the product thumbnail is clicked?

Pass data from child component to parent component Vue js

1 Answers