无法从子组件 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>

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

Cannot receive event from child component vue3.0

javascript

vue.js

vue-component

vuejs3