I have a button component which is a child component
<template>
<div class="button-container">
<el-button @click="$emit('onClick')" type="primary">{{ text }}</el-button>
</div>
</template>
I want to emit the click event in order for parent component to receive.
Here is the parent component
<script>
import Button from "@/components/Button.vue";
export default {
components: { Button } ,
methods: {
toRegister() { this.$router.push('/register'); }
}
}
</script>
<template>
<Button @on-click="toRegister" text="Register here" textColor="#5fb878" textSize="8px"></Button>
</template>
But i don't receive any thing from here.
I thought the problem is on the event name, but after i changed the name from onClick to clicked, same problem still.
Try to rename your custom component from Button to something else :
const { ref } = Vue
const app = Vue.createApp({
methods: {
toRegister() {
console.log('clicked')
//this.$router.push('/register');
}
}
})
app.component('btn', {
template: `
<div class="button-container">
<button @click="$emit('onClick')" type="primary">text</button>
</div>
`
})
app.mount('#demo')<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<btn @on-click="toRegister" text="Register here" textColor="#5fb878" textSize="8px"></btn>
</div>