<template> <ul> <product v-for="product in products" :product="product" @add="addToChart" /> </ul> </template> <script> const Product = { props: ["product"], render(h) { return h("li", { on: { click: this.click } }, this.product); }, methods: { click() { this.$emit("add", { product: this.product, quantity: 42 }); } } }; export default { data() { return { products: ["Foo", "Bar"] }; }, components: { Product }, methods: { addToChart({ product, quantity }) { console.log(product, quantity); } } } </script>

how to access both child event param and parent param in vue

// Create Vue application const app = Vue.createApp(...) // Define a new component called todo-item app.component('todo-item', { template: `<li>This is a todo</li>` }) // Mount Vue application app.mount(...)

vue create component

// Define a new component called button-counter Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' })

component in vue