Cannot receive event from child component vue3.0-CodePudding

I have a button component which is a child component

<template>
  <div >
    <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.

CodePudding user response：

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 >
      <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>