[Vuejs]-Pass data from child component to parent component Vue js

by

0👍

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?

Leave a comment