无法从子组件vue3.0接收事件

Question

我有一个按钮组件，它是子组件。

<template>
  <div class="button-container">
    <el-button @click="$emit('onClick')" type="primary">{{ text }}</el-button>
  </div>
</template>

我希望发出单击事件，以便父组件接收。

以下是父组件

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

但我没有从这里收到任何东西。

我认为问题在事件名称上，但在我将名称从onClick更改为clicked之后，仍然存在相同的问题。

Answer 1

尝试将自定义组件从Button重命名为其他组件：

​

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>

​