How to bubble up a click event from a custom component in vue.js?
In the child component:
<button @click="$emit('click')"></button>
And then in the parent component:
<MyButton @click="someFunction"/>
<template>
<div id="action-button">
<input type="button" id="in" @click="clicked" :value="value" />
</div>
</template>
<script>
export default {
name: 'action-button',
props: {
'value': String
},
methods: {
clicked () {
this.$emit('action-button-clicked')
}
}
}
</script>
And then instead of v-on:click
you should use v-on:action-button-clicked="handleClick"
.
<action-button v-on:action-button-clicked="handleClick"></action-button>
So the general idea is to handle clicks internally and then use emit
inside your component.