Tengo un componente de botón que es un componente secundario
<template> <div class="button-container"> <el-button @click="$emit('onClick')" type="primary">{{ text }}</el-button> </div> </template>Quiero emitir el evento de clic para que el componente principal lo reciba.
Aquí está el componente principal
<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>Pero no recibo nada de aquí.
Pensé que el problema estaba en el nombre del evento, pero después de cambiar el nombre de onClick a clicked , el mismo problema sigue.
Intente cambiar el nombre de su componente personalizado de Button a otra cosa:
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>