vuejs emit code example
Example 1: how to access both child event param and parent param in vue
<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>
Example 2: how to emit a function in vue
this.$emit('myEvent')
Example 3: vue pass data from child to parent
<script>
// @ is an alias to /src (in a vue-cli generated project)
import Child from '@/components/Child.vue'
// You also need to declare that the imported child component will be used:
export default {
components: {
Child
}
}
</script>
<template>
<div>
<!-- simplest prop - pass a string -->
<Child title="This is my title"></Child>
<!-- Pass an object, defined inline -->
<Child :parentData="{msg: 'xxx'}"></Child>
<!-- Pass an object, defined in the `data()` method -->
<Child :parentData="myData"></Child>
<!-- Pass a string variable, defined in `data()`. Note colon. -->
<Child :stringProp="stringMessage"></Child>
</div>
</template>
<script>
export default {
name: 'Child',
// To use props, they must be declared
props: {
parentData: Object,
stringProp: String,
title: String
}
}
</script>
<!-- Parent.vue -->
<template>
<div>
<!--
Listen for `childToParent`: the first parameter of the `$emit` method
in the child component. We're also listening and reacting to an
`increment` event - in this case, we increment a counter inline.
-->
<Child :parentData="myData" v-on:childToParent="onChildClick" v-on:increment="counter++"></PassProps>
</div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
data () {
return {
counter: 0,
fromChild: '', // This value is set to the value emitted by the child
}
},
name: 'about',
components: {
Child
},
methods: {
// Triggered when `childToParent` event is emitted by the child.
onChildClick (value) {
this.fromChild = value
}
}
}
</script>
<!-- Child.vue -->
<template>
<div class="child">
<!-- Simplest - call `$emit()` inline-->
<button type="button" name="button" v-on:click="$emit('increment')">Click me to increment!</button>
<!-- set a variable then trigger a method which calls `$emit()` -->
<label for="child-input">Child input: </label>
<input id="child-input" type="text" name="msg" v-model="childMessage" v-on:keyup="emitToParent">
</div>
</template>
<script>
export default {
data() {
return {
childMessage: ''
}
},
name: 'Child',
methods: {
// Define the method that emits data to the parent as the first parameter to `$emit()`.
// This is referenced in the <template> call in the parent. The second parameter is the payload.
emitToParent (event) {
this.$emit('childToParent', this.childMessage)
}
}
}
</script>
Example 4: vue 3 emits
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>