我尝试从子组件向其父组件发出事件。我已阅读 vuejs.org 指南 并认为我的语法正确。我的子组件 (AxisLabel.vue) 有

<script setup>
  ....
  const emit = defineEmits(['removeLetter', 'submitLetter'])
  const props = defineProps({
    stat: Object,
    index: Number,
    segments: Number
  })
  const point = computed(() =>
  {
    try {
      return valueToPoint(props.stat.value - 10, props.index, props.segments, true)
    }
    catch {
      return valueToPoint(0, 0, 9, true)
    }
  })
  function click() {
    if (props.stat.chosen) {
        props.stat.chosen = false;
        emit('removeLetter',props.stat.label)
    }
    else {
        props.stat.chosen = true;
        emit('submitLetter',props.stat.label)
    }
  }
  ....
</script>

<template>
    <text @click="click" :class=changeColour() class="prevent-select"
        :x="point.x" :y="point.y">{{stat.label}}
    </text>
</template>

并且在父组件 (app.vue) 中我有：

<script setup>
import AxisLabel from './components/AxisLabel.vue'
const tryingWord = ref('word')

function addToWord(letter) {
  tryingWord.value = tryingWord.value + letter
}
function removeFromWord(letter) {
  // ....todo....
 
}
</script>

<template>

  <svg width="300" height="300">
    <PolyGraph :stats="stats"></PolyGraph>
  </svg>
  <text class="prevent-select" rows="1" cols="9">
        {{tryingWord}}
  </text>

  <AxisLabel @submit-letter = "addToWord"/>
  <AxisLabel @remove-letter = "removeFromWord"/>
 
</template>

当我运行此代码时，我得到

[Vue warn]: Unhandled error during execution of render function at <AxisLabel onSubmitLetter=fn > at

随后出现“未定义”错误（见下文）。应用程序启动后就会发生这种情况，即没有触发点击事件。

如果我从 app.vue 中删除事件侦听器定义，则不会发生错误。

[稍后] 我现在看到， 没有 定义事件侦听器，AxisLabel 的 <text> 元素被调用了 9 次（应该是这样的） - 它是从另一个组件调用的：

<axis-label
  v-for="(stat, index) in stats"
  :stat="stat"
  :index="index"
  :segments="stats.length-1">

并且“stats”有 9 个成员。但是当我重新添加事件监听器时，该元素会尝试创建 第十次 ，并使用无效参数，从而导致崩溃 - Chrome 调试器指示此处的“props”未定义：

<text @click="click" :class=changeColour() class="prevent-select"
    :x="point.x" :y="point.y">{{stat.label}}
</text>

“props”用于计算文本的位置，但在使用它的地方添加 try/catch 并没有帮助。

我需要查看在 vue 中发出事件的 有效 示例 - vuejs.org 似乎没有提供一个。