I have created a very basic sample to find out how to correctly send an event from child to parent.

app.vue:

<script setup>
  import HelloWorld from './components/HelloWorld.vue'
  function clicked() {
        alert("clicked in parent")  // never gets here
  }
</script>

<template>
  <header>
      <HelloWorld msg="Click me!" @click_text="clicked" />
  </header>
  
</template>

HelloWorld.vue:

<script setup>
  const emit = defineEmits(['clickText'])
  defineProps({
    msg: {
      type: String,
      required: true
    }
  })
  function click() {
    // alert("clicked in child") // this works, so we got here
    emit('clickText')
  }
</script>

<template>
  <button @click="click">{{ msg }} </button>
</template>

...but the event doesn't reach the parent - what have I missed?

CodePudding user response：

You have a wrong.

<HelloWorld msg="Click me!" @click_text="clicked" />

In this line, you should not put _ for click_text, you should use - instead.

<HelloWorld msg="Click me!" @click-text="clicked" />